Question

我希望它可以指定一行，但是如果需要，程序可以将结果自动分成多行。当我填充动态div内容时，我需要这样做，因此需要相应地正确对齐。我正在使用引导程序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对齐的方法。

Answer 1

如果我正确理解了所有内容，则说明您使用的引导程序不正确。

每个引导程序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代表您的列希望以此屏幕宽度进行分组。

网格自动对齐为多行

1 个答案: