Bootstrap / CSS - 为什么这里需要 .clearfix

Question

我在尝试使用 Bootstrap 3 将一些 <input/> 元素放置在固定位置的 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>

这是上面的样子：

这是没有输入的：

检查宽度和最小宽度后，我发现只有在所有 col-* 元素之间使用 .clearfix 才能解决问题，如下所示：

    <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 元素更好的解决方法？

更新：

嗯...在第二个代码 sn-p 中，我的解决方案代码的 HTML 中似乎有一些无效的内容。这是自闭合的<i> 元素。那是解决 Bootply 中的问题，但不是在它之外。这是我在 Bootply 中得到的：

嗯...所以，我想我仍然没有解决这个问题（至少不是需要破解的）。关于如何通过引导方式解决此问题的任何想法？

Answer 1

input 容器的总宽度为col-xs-12。所以他们会尝试用完这 12 个列空间。因此，您可以在父级上使用较小的 col-*-#：

<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。

另外，永远不要用像<i> 这样的内联元素包装你的块级元素，比如<div>。除非它们的显示属性设置为inline-block 或block。否则您的页面将呈现出意想不到的结果。