Question

我希望h3文本和输入字段在一行中（h3对齐到左边，输入对齐到右边，具有相同的垂直位置）。

我已经尝试了form-inline课程，但它并没有按照我想要的方式工作。

代码：

   <div class="col-md-6">
      <form class="form-inline">
        <div class="form-group">
          <h3 class="pull-left">Upcoming Events</h3>
          <input type="text" class="form-control pull-right" placeholder="Country/Region">
        </div>
      </form>
    </div>

以下是它的样子（我添加了带有硬编码边距的第二列，以显示我希望它的外观）：http://www.bootply.com/f7QEh7oeqF

我知道如何按照我想要的方式对其进行格式化？

Answer 1

摆脱display: inline-block;班级上的form-group。

然后，您可以根据需要修改标题类的margin-top属性，以便将标题与输入字段垂直对齐。

Answer 2

只需添加边距并将.form-group宽度设置为100％。 http://www.bootply.com/uvjb30F2ji

Answer 3

为您的表单执行此操作：

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-sm-6 h3">Upcoming Events</label>
        <div class="col-sm-6">
            <input type="text" class="form-control" placeholder="Country/Region" />
        </div>
    </div>
</form>

并添加此CSS：

.h3 {
    margin-top: 0;
    line-height: 34px;
}

如果表单距离列表太远，则可以添加以下CSS：

.form-group {
    margin-bottom: 0;
}

注意：我使用h3类将label标记更改为.h3标记，因为表单控件需要与其关联的标签才能使屏幕阅读器正常工作。通常不是很大的交易，但有助于可访问性。

参见 plnkr

使用标头标记插入输入字段

3 个答案: