Twitter Bootstrap表单:使标签列更宽

Question

问题是关于Twitter Bootstrap表格.现在有人推荐使用左列(带标签)宽度大于140px的方法吗？重要的是它在移动设备上看起来也很好.

谢谢你的建议.

Answer 1

在Bootstrap v2.1.1中,.control-label宽度定义forms.less如下:

.form-horizontal
{
    .control-label
    {
        width: @horizontalComponentOffset - 20;
    }
}

您可以@horizontalComponentOffset在导入引导程序后覆盖项目的LESS代码中的变量定义variables.less.如果您需要针对特定​​页面进行此操作,请在该页面中执行此操作.否则,添加一个公共导入,或者更好的是,添加自己的variables.less文件,以覆盖Bootstrap的预定义变量.

就移动设备而言,如果需要,您可以使用媒体查询@horizontalComponentOffset为移动设备提供不同的价值.

Answer 2

我尝试了几种方法。还要在 html 文件中添加样式，这在桌面上看起来不错，但在移动设备上则不然。

解决方案是更改 bootstrap.css （尽管我不确定该文件是否有意更改）：

.form-horizontal .control-label {
  float: left;
  /*original: width: 140px;*/
  width: 200px;
  padding-top: 5px;
  text-align: right;
}
.form-horizontal .controls {
  /*original: margin-left: 160px;*/
  margin-left: 220px;
}