<分区>
<分区>
如何使 Bootstrap 网格居中？
这是代码
<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，因为我正在练习 bootstrap。谢谢。
最佳答案
在行 div 上使用 justify-content-center 类，以防使用 Bootstrap 版本 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>关于css - 居中 Bootstrap 网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51910749/
相关文章：
php - magento 1.9.1.0 local.xml 不工作
javascript - 如何停止 Bootstrap Badge 剥离空格
javascript - "JavaScript placed at the end of the document so the pages load faster"是吗？
twitter-bootstrap - Twitter Bootstrap 仅在电话上折叠组
javascript - Angularjs + Bootstrap : Google Page Insight test
jquery - 过渡动画 : all; Weird delay on margin-right