Html Twitter Bootstrap.col on a<；标签>；

使用Twitter引导时，在

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

上述问题和正确的功能可以通过将

包装在

中来实现。我的印象是类

col-*

可以用于任何元素；然而，也许我理解错了，因为将其应用于

不会产生预期的结果，即

不会展开以填充

行，除非它位于
之后

我的理解是错误的还是其他原因？
以下代码是我认为您需要的：


。控件标签{
背景：#00F；
颜色：#FFF；
}

首选接触方法：
电话

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

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

但是，对于您的具体问题，您可以通过两种方式解决。

在两个屏幕上都添加
col-xs-12
类–这将应用
宽度：100%
，并使它们在小屏幕上跨越整个宽度。

或者添加
标签{display:block；}
，这将使它们也具有全宽度–默认情况下，它们是内联元素。
您可以将列类添加到几乎所有内容中。请记住，嵌套是正确完成的。也许这个链接可以帮助你更多：谢谢。我知道我可以添加
col-xs-12
；然而，我的印象是引导首先是移动的，因此，如果没有为
xs
大小的设备指定任何内容，那么它将假定元素是
col-xs-12
。显然，除了在
元素上之外，它不会这样做。如果没有
col-xs-12
类，在小屏幕上就不会对元素应用任何额外的格式。正如我所说，
label
在默认情况下是一个内联元素，因此它只占用内容所需的空间。如果你不想添加bootstrap类，那么正如我所说的，通过你自己的样式表应用
display:block
也可以。我给你的部分回复我已经在另一篇文章中给出了回复。我没有问如何解决这个问题，正如我在问题中所说，我已经通过将其中一个问题包装在
中解决了这个问题；但是，我相信您关于
是一个内联元素的评论可能是关键。但是，它没有解释为什么没有指定
列xs
会将块级元素呈现为全屏宽度，而内联元素则不是。有什么想法吗？“它没有解释为什么没有指定X列会将块级元素呈现为全屏宽度”——默认情况下，块元素只占全屏宽度。谢谢你的回答。然而，我知道我可以添加
col-xs-12
来解决这个问题，然而，我的印象是引导首先是移动的，因此，如果没有为
xs
大小的设备指定任何内容，那么它就假定一个元素是
col-xs-12
。显然，它不会这样做，除了在
元素上，至少在
元素上不成立。否。它不是mobilefirst框架，您必须指定是否希望某些元素以这种方式运行。我很高兴能帮上忙。接受答案会很好。或者a+：）也许我误解了他们的观点，但它说：Bootstrap是最流行的HTML、CSS和JS框架，用于在web上开发响应性强、移动优先的项目。它还说，它是移动第一在第三个标题下来。最后，在“媒体查询”部分，它说
xs
是默认值。此外，它还表示我们不必为超小型设备定义任何内容，因为默认值为一列。想法？但标签是内联块，如果引导程序使内联块元素全宽（或任何其他宽度）按钮和跨距看起来全宽（意味着可怕和不需要）。