gpt4 book ai didi

html - 将 Bootstrap cols block 居中,末尾有一个短元素

转载 作者:太空宇宙 更新时间:2023-11-04 01:07:06 25 4
gpt4 key购买 nike

假设我有这样一个 Bootstrap block :

<div class='my_row'>
<div class='row'>
<div class='col-sm-4'>Something long</div>
<div class='col-sm-4'>Something else</div>
<div class='col-sm-4'>Hi</div>
</div>
</div>

和一些CSS:

.my_row {
width: 80%;
margin: 0 auto;
}

假设我已经正确编写了 css(即时编写),这在技术上是可行的:我将得到一排 3 个元素,它们正确地位于页面的中心。但是,即使最外面的 div 居中,最右边的 col-sm-4 中的少量内容也会使整体内容看起来有点偏左。 (而且我在编码时并不总是知道不同的 div 中会有多少文本,所以我不能作弊并将最后一个 div 设置为 col-sm-2 或类似的东西。)

如果我能让 col-sm-4 在布局方面像 col-sm-4 一样,但自动将它们的大小调整到内容的大小,然后将其反馈到.row,这样我就可以更接近于视觉居中。这可能吗?我可能会脱离 Bootstrap 并手动编写所有代码,但出于所有其他显而易见的原因,我更愿意坚持使用 Bootstrap。谢谢!

最佳答案

如果您使用的是 bootstrap 4,则可以在没有任何自定义 css 的情况下使用类似这样的东西:

<div class='my_row'>
<div class='row justify-content-center'>
<div class='col-auto'>Something long</div>
<div class='col-sm-4'>Something else</div> <!-- The column whose content will most likely fit into this size. Not necessarily in the center. -->
<div class='col-auto'>Hi</div>
</div>
</div>

这样,所有行将只占用所需的空间,并且仍然集中。

这里的关键是只给其中一列一个预定义的大小限制。在我的例子中是中心元素(这样左右元素可以获得尽可能多的增长机会。)。

这个解决方案的优点在于它很好地包裹了最后一行,并且在它太大而无法放在同一行时仍然将它与其他行集中在一起。

关于html - 将 Bootstrap cols block 居中,末尾有一个短元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51921432/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com