如何使用标签在html中引导内联2输入

Question

我有两个输入：

<div class="form-group">
        <label for="exampleInputEmail1">Original Amount</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
        </div>
    </div>

    <div class="form-group">
        <label for="exampleInputEmail1">Original Amount</label>
        <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
        </div>
    </div>

它看起来像这样：

我如何内联他们？ （标签在每个顶部）

Answer 1

您可以像这样使用Bootstrap网格..

    <div class="row">
        <div class="col-sm-4">
            <label for="exampleInputEmail1">Original Amount</label>
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
            </div>
        </div>
        <div class="col-sm-4">
            <label for="exampleInputEmail1">Original Amount</label>
            <div class="input-group">
                <div class="input-group-addon">$</div>
                <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
            </div>
        </div>
    </div>

Demo

Answer 2

将所有示例代码放在此div元素中：

<div class="form-inline">
  ...
</div>

有关详细信息，请参阅http://getbootstrap.com/css/#forms-inline。