12

几天前Twitter Bootstrap 3 RC1 发布了，我刚刚开始在个人项目中使用它。

我有一个水平表单，其中包括一些内联单选复选框组，但这些元素的水平对齐方式不相等：

在此处输入图像描述

问题 1：为什么 chrome 不显示 help-block 元素与标签在同一行？

问题2：如何将同一行的内联单选组与标签对齐？

问题3：以下标记有效吗？这些问题与标记有关吗？

标记：

<div class="container">
  <form class="form-horizontal">

  <div class="form-group">
    <label class="col-lg-2 control-label">Weight</label>
    <div class="col-lg-1">
      <input type="text" name="weight" class="form-control" value="20">
    </div>
    <div class="help-block"> grams</div>  
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Full part name</label>
    <div class="col-lg-6">
      <input type="text" name="name" class="form-control" placeholder="Don't use numeric characters..">
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Inline radios</label>
    <div class="col-lg-10">
      <label class="radio-inline">
        <input type="radio" name="radio"> Hello
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio"> Other
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio"> Another
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio" checked="checked"> Foobar
      </label>
    </div>
  </div>
</form>
</div>

编辑：

此外，小屏幕上的这个标记会产生一个“丢弃的帮助块元素”。我认为我的标记有问题，但我不知道出了什么问题。

小型设备

4

1 回答 1

6

您的标记乍一看似乎是有效的。关于你的问题1。

您已将输入设置为：

<div class="col-lg-1">
  <input type="text" name="weight" class="form-control" value="20">
</div>

因此宽度设置为 col-lg-1 前缀，另请参见：https ://stackoverflow.com/a/17920693/1596547 。“col-lg-1”堆栈低于 992 像素。当您的屏幕宽度大于 992 像素时。div 的宽度为 8.333% (100/12)。form-control 类将输入标签的宽度设置为 100%。在 992px 以下没有定义“col-lg-1”导致输入的 100% 宽度，输入以 100% 宽度显示。

尝试使用从不堆叠的 col-* 前缀（或使用其他 CSS 设置宽度）

我根本没有发现 Chrome 的不同行为。在 992px 以上，我会在 FF 和 Chrome 上找到这个： Twitter 的 Bootstrap3 中的表单

我还没有找到你的第二个问题的解决方案。

问题 2：您的标签从以下位置获得了 9px 的 padding-top：

 .form-horizontal .control-label {
     padding-top: 9px;
  }

.radio-inline 没有填充，因此将以下代码添加到您的 css 中：

.radio-inline, .checkbox-inline {
    padding-top: 9px;
 }

见：https ://github.com/twbs/bootstrap/pull/8967

于 2013-08-01T13:26:18.563 回答