如何使用 Bootstrap-4 的网格功能？答案

【问题标题】：how to use the grid feature of Bootrap-4?如何使用 Bootstrap-4 的网格功能？
【发布时间】：2020-12-17 20:58:48
【问题描述】：

我是网页设计的新手，正在尝试学习引导程序。我想创建一个产品页面，我尝试使用来自 - https://www.bootdey.com/snippets/view/shop-product-detail#css的预定义模板

当我使用给定的代码时，它没有显示为照片，描述分为两部分。两者都是垂直模式。

我希望它看起来像这样：

我想将图像和信息分成两列，并将整个产品详细信息包裹在白框中。

代码如下：

 <div class="container bootdey">
<div class="col-md-12">
<section class="panel">
      <div class="panel-body">
          <div class="col-md-6">
              <div class="pro-img-details">
                  <img src="https://via.placeholder.com/550x380/FFB6C1/000000" alt="">
              </div>
              <div class="pro-img-list">
                  <a href="#">
                      <img src="https://via.placeholder.com/115x100/87CEFA/000000" alt="">
                  </a>
                  <a href="#">
                      <img src="https://via.placeholder.com/115x100/FF7F50/000000" alt="">
                  </a>
                  <a href="#">
                      <img src="https://via.placeholder.com/115x100/20B2AA/000000" alt="">
                  </a>
                  <a href="#">
                      <img src="https://via.placeholder.com/120x100/20B2AA/000000" alt="">
                  </a>
              </div>
          </div>
          <div class="col-md-6">
              <h4 class="pro-d-title">
                  <a href="#" class="">
                      Leopard Shirt Dress
                  </a>
              </h4>
              <p>
                  Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
              </p>
              <div class="product_meta">
                  <span class="posted_in"> <strong>Categories:</strong> <a rel="tag" href="#">Jackets</a>, <a rel="tag" href="#">Men</a>, <a rel="tag" href="#">Shirts</a>, <a rel="tag" href="#">T-shirt</a>.</span>
                  <span class="tagged_as"><strong>Tags:</strong> <a rel="tag" href="#">mens</a>, <a rel="tag" href="#">womens</a>.</span>
              </div>
              <div class="m-bot15"> <strong>Price : </strong> <span class="amount-old">$544</span>  <span class="pro-price"> $300.00</span></div>
              <div class="form-group">
                  <label>Quantity</label>
                  <input type="quantiy" placeholder="1" class="form-control quantity">
              </div>
              <p>
                  <button class="btn btn-round btn-danger" type="button"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
              </p>
          </div>
      </div>
  </section>
  </div>
  </div>

请帮忙。谢谢。

【问题讨论】：

标签： html bootstrap-4 bootstrap-grid

【解决方案1】：

在父 div 中使用 d-flex 类

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
  <div class="container bootdey">
    <div class="col-md-12">
    <section class="panel">
          <div class="panel-body d-flex border border-5 p-2">
              <div class="col-md-6">
                  <div class="pro-img-details">
                      <img src="https://via.placeholder.com/550x380/FFB6C1/000000" alt="">
                  </div>
                  <div class="pro-img-list">
                      <a href="#">
                          <img src="https://via.placeholder.com/115x100/87CEFA/000000" alt="">
                      </a>
                      <a href="#">
                          <img src="https://via.placeholder.com/115x100/FF7F50/000000" alt="">
                      </a>
                      <a href="#">
                          <img src="https://via.placeholder.com/115x100/20B2AA/000000" alt="">
                      </a>
                      <a href="#">
                          <img src="https://via.placeholder.com/120x100/20B2AA/000000" alt="">
                      </a>
                  </div>
              </div>
              <div class="col-md-6 p-3">
                  <h4 class="pro-d-title">
                      <a href="#" class="">
                          Leopard Shirt Dress
                      </a>
                  </h4>
                  <p>
                      Praesent ac condimentum felis. Nulla at nisl orci, at dignissim dolor, The best product descriptions address your ideal buyer directly and personally. The best product descriptions address your ideal buyer directly and personally.
                  </p>
                  <div class="product_meta">
                      <span class="posted_in"> <strong>Categories:</strong> <a rel="tag" href="#">Jackets</a>, <a rel="tag" href="#">Men</a>, <a rel="tag" href="#">Shirts</a>, <a rel="tag" href="#">T-shirt</a>.</span>
                      <span class="tagged_as"><strong>Tags:</strong> <a rel="tag" href="#">mens</a>, <a rel="tag" href="#">womens</a>.</span>
                  </div>
                  <div class="m-bot15"> <strong>Price : </strong> <span class="amount-old">$544</span>  <span class="pro-price"> $300.00</span></div>
                  <div class="form-group">
                      <label>Quantity</label>
                      <input type="quantiy" placeholder="1" class="form-control quantity">
                  </div>
                  <p>
                      <button class="btn btn-round btn-danger" type="button"><i class="fa fa-shopping-cart"></i> Add to Cart</button>
                  </p>
              </div>
          </div>
      </section>
      </div>
      </div>
</body>
</html>

【讨论】：

它的工作很棒.. :-) 谢谢.. 如果我需要在边框和内容之间留出更多空间怎么办？
使用填充。 getbootstrap.com/docs/4.5/utilities/spacing