html – Twitter上的Bootstrap .col

当使用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>不会扩展以填充行,除非它在< div>之后/之后.

我的理解是不正确还是其他什么在起作用？

解决方法

I was under the impression that the class col-* can be used on any element

是的,通常你可以在几乎任何元素上使用col- *类 – 但是如果没有围绕它们的行元素,你可能无法获得期望的结果. (例如,.row在左侧和右侧包含负边距,以抵消在它们之间产生“沟槽”的列之间的填充.)

但是,对于您在此处的具体问题,您可以通过两种方式解决此问题.在它们两者上添加col-xs-12类 – 将应用宽度：100％,并使它们在小屏幕上跨越整个宽度.或添加标签{display：block;这将使它们也占据全宽 – 默认情况下,它们是内联元素.