Question

我在内联表单中对齐元素时出现问题。表单非常简单，但其中一列有一个长标签，它将输入元素推到比其他输入元素更低的位置。无论标签的行数是多少，水平对齐这些输入元素的正确方法是什么？

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="form-group col-xs-2">
            <label for="first" class="control-label">This is propably a multiline label</label>
            <input class="form-control" id="first">
        </div>
        <div class="form-group col-xs-4">
            <label for="second" class="control-label">Label</label>
            <input class="form-control" id="second">
        </div>
        <div class="form-group col-xs-6">
            <label for="third" class="control-label">Another</label>
            <input class="form-control" id="third">
        </div>
    </div>
</div>

＆＃13;

Answer 1

Change in HTML:
Make the grid  4 4 4 in html.


 <div class="container">
    <div class="row">
        <div class="form-group col-xs-4">
            <label for="first" class="control-label">This is propably a multiline label</label>
            <input class="form-control" id="first">
        </div>
        <div class="form-group col-xs-4">
            <label for="second" class="control-label">Label</label>
            <input class="form-control" id="second">
        </div>
        <div class="form-group col-xs-4">
            <label for="third" class="control-label">Another</label>
            <input class="form-control" id="third">
        </div>
    </div>
</div>


Css change:
Set the height of label to accommodate the max label height

 .row {
    vertical-align: bottom;
}
.form-group {
    display: inline-block;
}
.form-group .control-label{
    height:40px;
}

Bootstrap 3 - 将内联形式的元素与多行标签对齐

1 个答案: