使用twitter bootstrap，我的所有行应该加起来为12？

我想知道最佳做法是在这里。我正在制作一个表格，其中包含通过form-group课程分组的控件。这有控制分组horiztonally例如标题，姓氏，姓在一行，然后下一行可能有日，月，年的投入。使用twitter bootstrap，我的所有行应该加起来为12？

为了实现在一行中我用下面的标记中的三个控件：

<div class="form-group">        
    <div class="col-sm-4"> 
     <label for="title" class="">Title</label> 
     <select class="form-control" id="title" name="Title"> 
      <option value="Mr">Mr</option> 
     </select> 
    </div> 

    <div class="col-sm-4"> 
     <label for="forename">Forename</label> 
     <input class="form-control" id="forename" name="Forename" /> 
    </div> 

    <div class="col-sm-4"> 
     <label for="surname">Surname</label> 
     <input class="form-control" id="surname" name="Surname" /> 
    </div> 

    <div class="col-sm-4"> 
     <label for="dobDay">Date of birth</label> 
     <select class="form-control" id="dobDay" name="DobDay"> 
      <option value="-1">Day</option> 
     </select> 
    </div> 

    <div class="col-sm-4"> 
     <label for="dobMonth">Month</label> 
     <select class="form-control" id="dobMonth" name="DobMonth"> 
      <option value="-1">Month</option> 
     </select> 
    </div> 

    <div class="col-sm-4"> 
     <label for="dobYear">Year</label> 
     <select class="form-control" id="dobYear" name="DobYear"> 
      <option value="-1">Year</option> 
     </select> 
    </div> 
</div>

上述作品，但我想知道，如果它有所有列了在form-group增加12最佳实践，所以在那种情况下，我会将出生日期的字段分组在form-group？

来源

2015-01-13 lisburnite

根据所述引导文档（http://getbootstrap.com/css/#grid）..

“如果超过12列被放置在单个行中，EA ch组的多列将作为一个单位换行到一个新行。“

所以可以连续放置12个以上的单位，它只会导致溢出col-*换行。在构建响应式站点时，可以在不同的屏幕宽度/设备上实现灵活的布局。例如，你可以从3列下去中等宽度，下降到2列上较小宽度..

http://bootply.com/qmT5hfIXSJ

来源

2015-01-13 13:58:28 ZimSystem

-2

一排是如果你想正确使用山坳网格，你应该将它们包装成一排DIV 类似这样的东西加起来T12中这样：

<div class="form-group"> 
<div class="row"> 
    <div class="col-sm-4">some Content</div> 
    <div class="col-sm-4">some Content</div> 
    <div class="col-sm-4">some Content</div> 
</div> 

<div class="row"> 
    <div class="col-sm-4">some Content</div> 
    <div class="col-sm-4">some Content</div> 
    <div class="col-sm-4">some Content</div> 
</div> 
</div>

否则类COL-SM *是没有真正被使用

来源

2015-01-13 13:48:11

抱歉，但这在技术上不正确。在文档中（这里是：http：//getbootstrap.com/css/#forms-horizontal），它指出，'form-group'在'form-horizontal'内使用时行为类似，因此不需要'row' – lisburnite

这意味着它需要水平，他没有提供。所以是你的评论是一个替代解决方案，我的和你的都是正确的，但不要说这是不正确的，只是因为有另一种方式 –

除了什么其他的答案说一下关于行添加多达12个普遍的共识，具有一行而不具有一行的实施方式的区别在于一行像一个容器单元。如果一个div没有放入该行，那么它将出现在跨越视图宽度的行容器之后。当你有下面的代码这被认为是：

<div class="row"> 
    <div class="col-sm-4 inside">in row</div> 
    <div class="col-sm-4 inside">in row</div> 
    <div class="col-sm-4 inside">in row</div> 
    <div class="col-sm-4 inside">in row</div> 
</div> 
<div class="row"> 
    <div class="col-sm-4 inside">in row</div> 
    <div class="col-sm-4 inside">in row</div> 
    <div class="col-sm-4 inside">in row</div> 
    <div class="col-sm-4 inside">in row</div> 
</div>

这样，由于连续16米孤单山坳宽度，4米山坳宽度换到下一行，但仍排内。因此，第二行div中的下一个col宽度4从第3行开始，而不是第2行中的“拾取其他col 4宽度div所关闭的位置”。您可以在此处看到此演示中的差异：http://jsfiddle.net/swm53ran/61/

本质上行divs用于单独的内容，你不希望其他内容“流血”或“混合”成。行不是您的代码所必需的，但它们可以帮助将部分划分为与其他部分分开的部分

来源

2015-01-13 14:12:36 indubitablee

谢谢，这就是我的想法，这就是我希望它的工作原理。另外 - 在文档中，它指出'form-group'在'form-horiztonal'中使用时行为类似，因此不需要'row' – lisburnite

使用twitter bootstrap，我的所有行应该加起来为12？

回答

相关问题