forms - 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。如果您需要对特定页面进行此操作，请在该页面的 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;
}

Answer 3

不要忘记编辑

.form-actions {
    padding-left: 160px;
}

以及 forms.less

我认为这应该设置为变量。

我已经在 forms.less 中为我修改了它（两个新变量在 variables.less 中设置）：

// Horizontal-specific styles
// --------------------------

.form-horizontal {
  // Increase spacing between groups
  .control-group {
    margin-bottom: @baseLineHeight;
    .clearfix();
  }
  // Float the labels left
  .control-label {
    float: left;
    // ub was 140px
    width: @labelWidth;
    padding-top: 5px;
    text-align: right;
  }
  // Move over all input controls and content
  .controls {
    // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
    // don't inherit the margin of the parent, in this case .controls
    *display: inline-block;
    // ub was 20px
    *padding-left: @labelPadding;
    // ub was 160px
    margin-left: @labelWidth + @labelPadding;
    *margin-left: 0;
    &:first-child {
      // ub was 160px
      *padding-left: @labelWidth + @labelPadding;
    }
  }
  // Remove bottom margin on block level help text since that's accounted for on .control-group
  .help-block {
    margin-top: @baseLineHeight / 2;
    margin-bottom: 0;
  }
  // Move over buttons in .form-actions to align with .controls
  .form-actions {
   // ub was 160px
    padding-left: @labelWidth + @labelPadding;
  }
}