Bootstrap：内联表单组，顶部带有标签

Question

我有一个普通的表格（Twitter Bootstrap，不是内联），但是一个输入字段旁边有一个按钮（见下图）。所有输入字段都在顶部有一个标签。

什么是正确的Bootstrap语法（最好不需要添加我自己的CSS），以使内联表单组（输入字段和旁边的按钮）具有不内联的标签（即位于输入上方）场）？

<form>
  <div class="form-group">
    <label for="mobile">Mobile</label>
    <input type="text" class="form-control" />
  </div>
  <div class="row">
    <div class="col-xs-8">
      <div class="form-group">        
        <label for="coupon">Coupon</label> <!-- should behave like the other non-inlined form fields -->
        <input type="text" class="form-control" />
      </div>
    </div>
    <!-- should be inline aligned with the input field -->
    <div class="col-xs-4">
      <button class="btn btn-primary">Apply</button>
    </div>
  </div>  
</form>

Answer 1

您可以使用已提供的输入组类Bootstrap。

像这样：

jsFiddle

CODE SNIPPET

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<main class="container">
  <form>
    <div class="form-group">
      <label for="mobile">Mobile</label>
      <input type="text" class="form-control" />
    </div>
    <div class="form-group">
      <label for="coupon">Coupon</label>
      <!-- should behave like the other non-inlined form fields -->
      <div class="input-group">
        <input type="text" class="form-control" />
        <span class="input-group-btn">
        <button class="btn btn-primary" type="button">Apply</button>
      </span>
      </div>
    </div>
  </form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在按钮中添加样式margin-top:24px。我假设此按钮最终会有id或其他class，以便在点击时识别它。从那里在样式表中创建一个选择器并将其添加到那里，而不是像这个例子那样内联。

<button style="margin-top:24px;" class="btn btn-primary">Apply</button>

Answer 3

如果你不打算以保证金为中心，那么你有一个jsfiddle。您可以为这些div添加另一个类，这样您就不会更改所有默认的引导程序样式，但这只是为了向您展示如何执行此操作

.col-xs-7, .col-xs-4{
  display:inline-block;
  float:none;
}

Answer 4

这是一个可能有帮助的JSFiddle：https://jsfiddle.net/DTcHh/23855/

我尝试通过不设置任何固定边距来实现此目的，以便您可以自由调整按钮大小。

因此，使用javascript完成对齐：

$('.pull-down').each(function() {
    var $this = $(this);
    $this.css('margin-top', $this.parent().height() - $this.height() - 15)
});

由于Bootstrap对输入有默认15，因此添加了数字margin-bottom: 15px。