我正在使用Boostrap4并尝试制作一个简单的4 * 4网格div,其中包含图像和一些文本。最初,我尝试使用嵌套在一行中的6列,结果看起来像:
所以这里的问题是图片不在列的中心。接下来我在行上使用了text-center
。这有效但现在当我希望文本对齐到图像的左侧时,文本也会居中:
所以我最终废弃了所有这些并删除了bootstrap行和列,并尝试使用bootstrap的flex类。这具有一般结构:
<div class="d-flex justify-content-around">
<div class="d-flex flex-column">
<div> image and text content here </div>
</div>
</div>
现在这很有效,但由于列高可能会有所不同,因此行看起来不对齐:
有什么方法可以解决这个问题?尝试使用bootstrap4制作这样的div网格时的最佳做法是什么。
因为有人想看到整个代码。
<div class="row border justify-content-around border-r flex-wrap">
<div class="d-flex flex-column border-r"> <!-- this is repeated twice more for each column -->
<div class="tile">
<a href="./wanderlust.html">
<img class ="thumbnail img-fluid" src ="images/wanderlust.jpg"/>
<h5 class=" thumbnail-title"> Wanderlust </h5>
<p class=" thumbnail-subtitle"> design research + UX + UI <br> + programming </p>
</a>
</div>
<div class="tile">
<a href ="behavior-change.html">
<img class ="thumbnail img-fluid" src ="images/breakfast.jpg">
<h5 class="thumbnail-title"> Behavior Change </h5>
<p class="thumbnail-subtitle"> design research</p>
</a>
</div>
</div>
</div>
答案 0 :(得分:0)
您应该使用row
和col-*
s并使用img
和d-block
类将mx-auto
对齐到列的中心。
<img class="thumbnail img-fluid d-block mx-auto" src="images/wanderlust.jpg" />
d-block
将其显示设置为block
,mx-auto
将其margin-left
和margin-right
设置为auto
。