Question

如何将引导网格居中？

这是代码

<div id="what-we-do" class="text-center jumbotron">
<p class="text-center">What We Do</p>

<p>
  We specialize with some of the most popular coffee in the market such as:
</p>
<div class="container">
  <div class="row">
      <div class="col-md-3"> <img src="Images/Caffè Americano.png" alt="Caffè Americano"/><p> Caffè Americano </p></div>
      <div class="col-md-3"> <img src="Images/Café Latte.jpg" alt="Cafe Latte"/><p> Cafè Latte </p></div>
      <div class="col-md-3"> <img src="Images/Cappuccino.jpg" alt="Cappuccino"/> <p> Cappuccino </p></div>
  </div>
  <div class="row">
      <div class="col-md-3"> <img src="Images/Espresso.jpg" alt="Espresso"/> <p>Espresso</p> </div>
      <div class="col-md-3"> <img src="Images/Flat White.jpg" alt="Flat White Coffee"/> <p> Flat White</p> </div>
      <div class="col-md-3"> <img src="Images/Long Black.jpeg" alt="Long Black Coffee"/> <p> Long Black</p> </div>
  </div>
</div>

</div>

这是图片： Bootstrap Grid Not in Center Image

这是一些我用来使图像大小相同的CSS

#what-we-do img {
    display: block;
    max-width: 100%;
    width: 500px; /* You can set the dimensions to whatever you want */
    height: 200px;
    object-fit: cover;
  }

我在容器中使用了class =“ text-center”，但是它不起作用。如果可能，是否可以使用一些BS类使其居中？我正在最小化CSS，因为我正在练习自举。谢谢。

Answer 1

在div行上使用justify-content-center类，以防使用引导程序版本4

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div id="what-we-do" class="text-center jumbotron">
  <p class="text-center">What We Do</p>

  <p>
    We specialize with some of the most popular coffee in the market such as:
  </p>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-3"> <img src="Images/Caffè Americano.png" alt="Caffè Americano" />
        <p> Caffè Americano </p>
      </div>
      <div class="col-md-3"> <img src="Images/Café Latte.jpg" alt="Cafe Latte" />
        <p> Cafè Latte </p>
      </div>
      <div class="col-md-3"> <img src="Images/Cappuccino.jpg" alt="Cappuccino" />
        <p> Cappuccino </p>
      </div>
    </div>
    <div class="row justify-content-center">
      <div class="col-md-3"> <img src="Images/Espresso.jpg" alt="Espresso" />
        <p>Espresso</p>
      </div>
      <div class="col-md-3"> <img src="Images/Flat White.jpg" alt="Flat White Coffee" />
        <p> Flat White</p>
      </div>
      <div class="col-md-3"> <img src="Images/Long Black.jpeg" alt="Long Black Coffee" />
        <p> Long Black</p>
      </div>
    </div>
  </div>

</div>

将引导网格居中

1 个答案: