基于Bootstrap优化产品卡片样式并实现三卡片横向排列求助

Hey there! Let's get those 3 product cards lined up properly and styled close to your target design. The issue with float:left is that your fixed-width cards plus margins are overflowing the container—Bootstrap's built-in grid system is way more reliable for this kind of layout, so we'll lean into that.

Why Your Current Setup Isn't Working #

Your .product has a fixed 390px width plus margin:1em 0—when you add 3 of these, the total width (3*390 + margins) exceeds the container's width, forcing the third card to wrap. Also, mixing manual floats with Bootstrap's layout tools can cause unexpected conflicts.

Step-by-Step Solution #

1. Leverage Bootstrap's 12-Column Grid
   Bootstrap uses a 12-column layout, so for 3 cards per row, we'll use .col-md-4 (each column takes 4 of 12 columns, 4*3=12). Wrap all cards in a .row to contain the columns, and use Bootstrap's gap utilities to add spacing between them.

2. Tweak Card Styles

• Remove float:left from .product (Bootstrap's grid handles positioning)
• Set .product width to 100% so it fills its column container (makes it responsive)
• Fix the typo in ul li font-size (you had 9em which is way too big—change to 0.9em)
• Clean up default list styling (remove bullets and excess padding)
• Add subtle hover effects to match the polished look of your target design

Modified Code #

HTML

<div class="container">
  <div class="row g-4"> <!-- g-4 adds consistent gap between columns -->
    <!-- Product Card 1 -->
    <div class="col-md-4">
      <div class="product">
        <div class="img-container">
          <img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
        </div>
        <div class="product-info">
          <div class="product-content">
            <h1>Oculus Go</h1>
            <ul>
              <li>Lorem ipsum dolor sit ametconsectetu.</li>
              <li>adipisicing elit dlanditiis quis ip.</li>
            </ul>
            <div class="buttons">
              <a class="button buy" href="#">More Info</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="col-md-4">
      <div class="product">
        <div class="img-container">
          <img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
        </div>
        <div class="product-info">
          <div class="product-content">
            <h1>Oculus Go</h1>
            <ul>
              <li>Lorem ipsum dolor sit ametconsectetu.</li>
              <li>adipisicing elit dlanditiis quis ip.</li>
            </ul>
            <div class="buttons">
              <a class="button buy" href="#">More Info</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="col-md-4">
      <div class="product">
        <div class="img-container">
          <img src="https://icdn2.digitaltrends.com/image/oculus-go-press-720x720.jpg">
        </div>
        <div class="product-info">
          <div class="product-content">
            <h1>Oculus Go</h1>
            <ul>
              <li>Lorem ipsum dolor sit ametconsectetu.</li>
              <li>adipisicing elit dlanditiis quis ip.</li>
            </ul>
            <div class="buttons">
              <a class="button buy" href="#">More Info</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.container .row {
  margin-top: 1em;
}

.container .product {
  width: 100%; /* Fill the column width */
  height: 130px;
  display: flex;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0px 0px 21px 3px rgba(0, 0, 0, 0.15);
  transition: all .1s ease-in-out;
}

.container .product:hover {
  transform: translateY(-2px); /* Subtle lift on hover */
}

.container .product .img-container {
  flex: 2;
}

.container .product .img-container img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.container .product .product-info {
  background: #fff;
  flex: 3;
  display: flex;
  align-items: center; /* Vertically center content */
}

.container .product .product-info .product-content {
  padding: .2em 1em;
  width: 100%;
}

.container .product .product-info .product-content h1 {
  font-size: 1.5em;
  margin: 0 0 0.5em 0;
}

.container .product .product-info .product-content ul {
  padding-left: 0;
  list-style: none;
  margin: 0 0 0.8em 0;
}

.container .product .product-info .product-content ul li {
  color: #636363;
  font-size: 0.9em;
  line-height: 1.4;
}

.container .product .product-info .product-content .buttons {
  padding-top: .4em;
}

.container .product .product-info .product-content .buttons .button {
  text-decoration: none;
  color: #5e5e5e;
  font-weight: bold;
  padding: .3em .65em;
  border-radius: 2.3px;
  transition: all .1s ease-in-out;
}

.container .product .product-info .product-content .buttons .buy {
  border: 1px #5e5e5e solid;
}

.container .product .product-info .product-content .buttons .buy:hover {
  background-color: #f0f0f0; /* Hover effect for button */
}

Key Improvements #

• Responsive Layout: Cards will stay in a row on medium+ screens and stack vertically on smaller devices (no extra work needed!)
• Polished Styling: Added vertical centering for content, fixed the oversized list text, and added subtle hover animations to match your target design
• Clean Spacing: Used Bootstrap's gap utility to ensure consistent spacing between cards without manual margin hacks

Now you should have 3 perfectly aligned product cards that look just like your target example!

内容的提问来源于stack exchange，提问作者Venzo