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。或者您的页面将呈现意想不到的结果。