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

Question

我在尝试将一些 <input/> 元素放置在带有 Bootstrap 的固定位置 DIV 中时遇到问题 3。容器 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 来转向理论，例如从这里开始：但是，同样，我没有看到 .clearfix 在这种情况下有什么变化。

我的意思是，就我而言，所有 elements/content 都已经浮动了。为什么容器会像那样增长？.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 元素更好的解决方法？

更新：

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

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

Answer 1

input 容器的总宽度为 col-xs-12。所以他们会尝试用完那 12 列 space。所以你可以在父级上使用较小的 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。否则您的页面将呈现出意想不到的结果。

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

Bootstrap / CSS - why is .clearfix needed here

clearfix

twitter-bootstrap