自动将网格对齐到多行中
自动将网格对齐到多行中
提问于 2019-01-02 23:31:12
我想让它让我可以指定一行，但如果需要的话，让程序自动将结果拆分为多行。我需要这样做，因为我的动态div内容正在被填充，所以它需要相应地正确对齐。我使用的是bootstrap 3。
<div class="row">
<div class="col-md-4">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
</div>
</div>最终结果将是:第一行上的“一”、“二”、“三”。“四”，“五”，“六”在第二排。“七”在第三排。
基本上，我正在寻找的是一种让引导程序自动与每行最多div对齐的方法。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-01-03 03:51:16
如果我理解正确的话，您使用bootstrap的方式不正确。
每个bootstrap row都有12列。这些列可以分组。现在您可以对每个设备的这些列进行分组。Read more on the bootstrap 3 documentation。例如：
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
one
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
two
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
three
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
four
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
five
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
six
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
seven
</div>
</div>
此代码将对齐每个数字文本(一、二、三...)根据您的col-XX-Y的大小。所以在中等大小的md上，你有3列。对于较小的sm大小，您有2列，等等。这是基于12列(在总数上)除以您在col-XX-Y类中指定的数字。
只需记住：
XX表示屏幕宽度，Y表示要在此屏幕宽度上分组的列。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54009018
复制相关文章
相似问题