使用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？

回答

相關問題