html - 如何在 Bootstrap 3 中将一个 div 与另一个对齐？

Question

我有以下 html。与 input 字段相比，我的 label 没有垂直居中对齐。

<div class="row">
    <div class="col-sm-5">
        <label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
    </div>
    <div class="col-sm-2">
        <input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
    </div>
</div>

如何设置 input 和 label 具有相同的高度？

JSFiddle

https://jsfiddle.net/mLcrv19z/

Answer 1

要使两个元素(标签和输入)垂直对齐，请尝试使用 form-inline 类以及 form-group。这是它的样子:

<div class="form-inline">
        <div class="form-group">
            <label for="investmentbalance">Investment Balance</label>
            <input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance" />
        </div>
</div>

https://jsfiddle.net/mLcrv19z/10/