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

Question

我是网页设计新手，正在努力学习 bootstrap。我想为其创建一个产品页面，我尝试使用来自 - 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">4</span>  <span class="pro-price"> 0.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>

请帮忙。谢谢。

Answer 1

在父级中使用 d-flex class div

<!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">4</span>  <span class="pro-price"> 0.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>

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

how to use the grid feature of Bootrap-4?

html

bootstrap-4

bootstrap-grid