twitter-bootstrap Bootstrap 水平表单“控制标签”不使用响应式样式
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/12804741/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap horizontal form "control-label" not using responsive styling
提问by James P. Wright
I'm using the "form-horizontal" class with Bootstrap 2, but my labels don't seem to be utilizing the Responsive styling. This is what it looks like:
我在 Bootstrap 2 中使用了“form-horizontal”类,但我的标签似乎没有使用响应式样式。这是它的样子:


When I examine it, it specifically has "width:160px" on the label, which is the regular Bootstrap setting, but the Responsive styling just has "width:auto".
当我检查它时,它的标签上特别有“width:160px”,这是常规的 Bootstrap 设置,但响应式样式只有“width:auto”。
My HTML for that section looks like this:
我该部分的 HTML 如下所示:
<form id="addproject" class="form-horizontal">
<div class="control-group">
<label for="title" class="control-label">Title</label>
<div class="controls">
<input type="text" name="title" id="title" />
</div>
</div>
</form>
采纳答案by jevanler
bootstrap.cssmust be loaded before the bootstrap-responsive.cssfile.
bootstrap.css必须在bootstrap-responsive.css文件之前加载。
回答by LVB
.control-label is only specified in responsive.css for (max-width: 480px). Have you tried shrinking the width way down? When I use the forms, they look like your example until 480px, at which point the labels move above the input fields.
.control-label 只在responsive.css 中指定为(max-width: 480px)。你有没有试过缩小宽度?当我使用表单时,它们看起来像您的示例,直到 480px,此时标签移动到输入字段上方。
回答by Raul Valverde
If you want to change as you add the class
如果您想在添加课程时进行更改
<input type="text" name="title" id="title" class="span3" />
Another solution is to directly specify a style ID width: auto
另一种解决方案是直接指定一个样式ID宽度:auto
#title {
width_auto;
}
Remember that your new style should be after the bootstrap css
请记住,您的新样式应该在 bootstrap css 之后

