Bootstrap的网格列数每行 [英] Bootstrap's grid columns number per row

问题描述

Bootstrap附带一个必须放置在行中的12列网格系统。

我的问题是，列号/行必须是12（或更少），或者我可以有如下的布局

 < div class =row> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< / div> 
  

我的理解是，一行中的列数不能超过12，因此基于我以前的代码段，我会做这样的

 < div class =row> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< / div> 
< div class =row> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< div class =col-md-4>< / div> 
< / div> 
  

我错过了什么吗？

解决方案

Bootstrap允许你堆栈列，下面是从他们的 docs ：

 <！ - 通过将一个全宽和另一个半宽 - > 
< div class =row> 
< div class =col-xs-12 col-md-8> .col-xs-12 .col-md-8< / div> 
< div class =col-xs-6 col-md-4> .col-xs-6 .col-md-4< / div> 
< / div> 
 
<！ - 列在移动设备上以50％的宽度开始，在桌面设备上的宽度增加到33.3％ - > 
< div class =row> 
< div class =col-xs-6 col-md-4> .col-xs-6 .col-md-4< / div> 
< div class =col-xs-6 col-md-4> .col-xs-6 .col-md-4< / div> 
< div class =col-xs-6 col-md-4> .col-xs-6 .col-md-4< / div> 
< / div> 
  

也可以从 docs ：

有四层网格可用，在某些断点，你的列不会清楚得很清楚，因为一个比另一个更高。要解决这个问题，请使用.clearfix和我们的响应式实用程序类的组合。

  ; div class =row> 
< div class =col-xs-6 col-sm-3> .col-xs-6 .col-sm-3< / div> 
< div class =col-xs-6 col-sm-3> .col-xs-6 .col-sm-3< / div> 
 
<！ - 只为所需的视口添加额外的修复 - > 
< div class =clearfix visible-xs>< / div> 
 
< div class =col-xs-6 col-sm-3> .col-xs-6 .col-sm-3< / div> 
< div class =col-xs-6 col-sm-3> .col-xs-6 .col-sm-3< / div> 
< / div> 
 

这里，col-xs的值加起来为24， p>


Bootstrap comes with a 12 columns grid system that must be placed within rows.

My question is, does the column number / row must be 12 (or less), or can I have a layout like the following

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

My understanding was that columns number within a row mustn't exceed 12, so based on my previous snippet, I would have made something like this

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>
<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
  <div class="col-md-4"></div>
</div>

Is there anything I missed ?

解决方案

Bootstrap allows you to "stack columns", the following is taken from their docs:

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Also from their docs:

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

Here, the col-xs values add up to 24, with a clearfix adding the required break

这篇关于Bootstrap的网格列数每行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！