Question

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

感谢您的推荐。

Answer 1

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

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

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

就移动设备而言，如果需要，您可以使用media queries为移动设备提供不同的@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;
  }
}

Twitter Bootstrap表单：使标签列更宽

3 个答案: