Bootstrap/CSS - 爲什麼在這裏需要.clearfix

Question

我試圖將一些<input/>元素放置在帶有Bootstrap 3的固定位置的DIV中時出現問題。似乎容器DIV的寬度增加以適應輸入（它們分別是在col-*容器內）沒有明顯的原因。這裏是一個演示代碼：

<div class="dropdown-menu" style="top: 10px; left: 400px; position: fixed; display: block;"> 
     <div class="col-xs-12"> 
     <div class="col-xs-12"> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="0">Bark</label> 
      </div> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="1">Roll over</label> 
      </div> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="2">Find bone and bury it underground</label> 
      </div> 
     </div> 
     <div class="col-xs-12 whyyyyyyyyyyyyyyyyyyyyyy"> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
     </div> 
     </div> 
    </div> 

這是上面的樣子有：

這是沒有輸入：

後檢查寬度和最小寬度，我發現只使用.clearfix所有col-*元素固定t他的問題，像這樣：

<div class="dropdown-menu" style="top: 10px; left: 400px; position: fixed; display: block;"> 
     <div class="col-xs-12"> 
     <div class="col-xs-12"> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="0">Bark</label> 
      </div> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="1">Roll over</label> 
      </div> 
      <div class="radio"> 
      <label> <input type="radio" name="st" value="2">Find bone and bury it underground</label> 
      </div> 
     </div> 
     <i class="clearfix" /> 
     <div class="col-xs-12 whyyyyyyyyyyyyyyyyyyyyyy"> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <i class="clearfix" /> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <i class="clearfix" /> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
      <i class="clearfix" /> 
      <div class="col-xs-3"> 
      <input class="form-control" /> 
      </div> 
     </div> 
     </div> 
    </div> 

這是怎麼以上內容：

其中一個.clearfix -es的失蹤，我得到可怕的容器尺寸。

我已經嘗試轉向理論，通過閱讀約.clearfix，例如，從這裏：https://stackoverflow.com/a/9543569/964053但是，我再次看不到.clearfix在這種情況下的變化。

我的意思是，我的案例中的所有元素/內容都已經浮動。爲什麼容器會像這樣增長，.clearfix如何解決它？參考答案說floats do not impart shape to its container和What clearfix does is to force content after the floats or the container containing the floats to render below it。如果在我的情況下，浮動元素本身不會導致容器增長，那麼這是什麼？他們之間的空間？

有沒有比在整個地方使用clearfix元素更好的解決辦法？

UPDATE：

嗯......好像有東西在我的解決方案代碼的HTML無效，在第2個代碼段。這是自我關閉<i>元素。這就解決了Bootply中的問題，但不在其外。以下是我在Bootply是越來越：

嗯......所以，我想我還是沒有解決這個（至少不是一個需要破解）。任何想法如何解決這個bootstrap的方式？

Answer 1

input容器的總寬度爲col-xs-12。所以他們會嘗試使用該列的空間。所以，你可以使用更小山坳 - * - ＃在父：

<div class="col-xs-6"> 
    <div class="col-xs-3"> 
    <input class="form-control" /> 
    </div> 
    <div class="col-xs-3"> 
    <input class="form-control" /> 
    </div> 
    <div class="col-xs-3"> 
    <input class="form-control" /> 
    </div> 
    <div class="col-xs-3"> 
    <input class="form-control" /> 
    </div> 
</div> 

然而，你可能在你的列是如何建立一個更大的問題。例如，作爲另一個col-xs-12的直接後代的列col-xs-12是多餘的。您還應該使用.row容器。

查看網格上的boostrap documentation。

而且，從來沒有與內聯元素包裝你的塊級元素，如<div>像<i>除非它們的顯示屬性設置爲inline-block或block。或者您的頁面將呈現意想不到的結果。