<label> 上的 Twitter Bootstrap .col

Question

当使用 Twitter Bootstrap 两列时，在 xs 设备上查看时，每列宽 12 列，将它们自己呈现在一行上：

<label for="contact" class="col-sm-3 control-label">Preferred Contact Method:</label>
<label for="telephone" class="col-sm-2 control-label">
  <small><em>Telephone</em></small>
</label>

在小型移动设备上查看时，列应有效地扩展到每个col-xs-12；但是，这两个项目彼此相邻显示，表明情况并非如此。更奇怪的是，另一个项目，比如col-sm-2，确实出现在下一行。

上述问题和正确的功能可以通过将<label> 包装在<div> 中来实现。我的印象是 col-* 类可以用于任何元素；但是，也许我已经理解了这个错误，因为将其应用于<label> 不会产生预期的结果，也就是说，<label> 不会扩展以填充row，除非它出现在<div> 之后/之后。

是我的理解不正确还是另有原因？

Answer 1

我的印象是 col-* 类可以用于任何元素

是的，一般来说，您几乎可以在任何元素上使用 col-* 类 - 但如果没有 row 元素围绕它们，您可能无法获得预期的结果。 （例如，.row 在左侧和右侧包含一个负边距，以抵消在它们之间产生“gutter”的列之间的填充。）

但是，对于您的具体问题，您可以通过两种方式解决。
要么在它们两个上添加 col-xs-12 类 - 这将应用 width:100%，并使它们在小屏幕上跨越整个宽度。
或者添加label { display:block; }，这将使它们也采用全宽——默认情况下，它们是内联元素。

Answer 2

以下代码是我认为你想要的：

.control-label{
    background:#00F;
    color:#FFF;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<label for="contact" class="col-xs-12 col-sm-3 col-md-6 control-label">Preferred Contact Method:</label>
<label for="telephone" class="col-xs-12 col-sm-2 col-md-6 control-label">
  <small><em>Telephone</em></small>
</label>

在非常小的设备（小于 768 像素）上是全宽 - 即 col-xs - 在小型设备上是四分之一宽度（在 768 像素和 992 像素之间） - 即 col-sm - 在任何大于该值的设备上为半角 - 即 col-md。

如果我弄错了，请说更新我的答案。 如果有帮助，+1。