Question

我在Bootstrap中有以下简单形式，但我正在努力正确对齐所有内容。如何将字段彼此垂直对齐，因此From＆amp; To排队吗？

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

您可以在此处看到 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>

看看这个小提琴：https://jsfiddle.net/wietsedevries/sg0gbuem/1/

对齐标签＆amp;具有Bootstrap形式的字段

1 个答案: