html - 将标签和字段与 Bootstrap 表单对齐

Question

我在 Bootstrap 中有以下简单形式，但我正在努力正确对齐所有内容。如何将字段彼此垂直对齐，以便 From 和 To 对齐？

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
    
            <div class="col-md-12">
            <div class="span12">
                <div class="form-inline">
                    <label for="check-in">DATE RAISED FROM</label>
                    <input type="text" id="cid" name="fymd" class="span2 input-append date" placeholder="dd/mm/yyyy" />
                    <label for="check-out">TO</label>
                    <input type="text" id="cod" name="tymd" class="span2 input-append date" placeholder="dd/mm/yyyy" />
                </div>
            </div>
        </div>


        <div class="col-md-12">
            <div class="span12">
                <div class="form-inline">
                    <label for="check-in">COLLECTION DATE FROM</label>
                    <input type="text" id="cid" name="fymd" class="span2 input-append date" placeholder="dd/mm/yyyy" />
                    <label for="check-out">TO</label>
                    <input type="text" id="cod" name="tymd" class="span2 input-append date" placeholder="dd/mm/yyyy" />
                </div>
            </div>
        </div>

    
    </div>
</div>

你可以看到一个 DEMO 在这里。

Answer 1

标签的宽度是动态的，所以除非它们都有完全相同的文本，否则它们不会对齐。使用 bootstrap 的网格自行对齐它们:

<div class="row">
    <div class="col-xs-5">DATE RAISED FROM</div>
    <div class="col-xs-3">
        <input type="text" placeholder="dd/mm/yyyy" />
    </div>
    <div class="col-xs-1">TO</div>
    <div class="col-xs-3">
        <input type="text" placeholder="dd/mm/yyyy" />
    </div>
</div>

看看这个 fiddle :https://jsfiddle.net/wietsedevries/sg0gbuem/1/