Question

比方说，我必须嵌套三个bootstrap col类，最后一个将是col-md-12，所以它达到了100％。我的问题是，是否可以像第一个示例一样将col-md-12嵌套在一行中，还是我需要为col-md-12创建另一行？

例如1

<div class="row">
 <div class="col-md-6">
  1
 </div>
<div class="col-md-6">
  2
 </div>
<div class="col-md-12">
  3
 </div>
</div>

或

例如2

<div class="row">
 <div class="col-md-6">
  1
 </div>
 <div class="col-md-6">
  2
 </div>
</div>

<div class="row">
 <div class="col-md-12">
  3
 </div>
</div>

Answer 1

一行中的列数超出其容纳量绝对是很好的。他们会包裹起来。

此外，这对于Bootstrap的响应式设计方法至关重要。

您可能会有类似的内容：

 public static int countSquares(int a, int b) 
{ 
    int cnt = 0; 

    for (int i = a; i <= b; i++) 
        for (int j = 1; j * j <= i; j++) 
            if (j * j == i) 
                cnt++; 
    return cnt; 
} 

public static void Main() 
{ 
    int a = 1, b = 100; 
    Console.Write("Count of squares is " + countSquares(a, b)); 
}

在大窗口上使用4x1布局，在小窗口上使用2x2布局。

如果必须为每行添加一个新的<div class="row"> <div class="col-sm-6 col-lg-3">…</div> <div class="col-sm-6 col-lg-3">…</div> <div class="col-sm-6 col-lg-3">…</div> <div class="col-sm-6 col-lg-3">…</div> </div>容器，那将是不可能的。

Answer 2

如果您需要将内容放在同一行中，则可以按照示例1进行操作，否则，您可以继续阅读帖子的示例2。

这两种方法都是正确的，具体取决于您要使用哪一种。

第一个示例将您的列放在同一行中，但是第二个示例将为您的 col-md-12

创建一个单独的行

希望有帮助

在行内实现Bootstrap col-md-12的最佳方法是什么？

2 个答案: