Question

我正在使用Bootstrap来创建一个在同一行中有3个控件的HTML表单。所有控件（单选按钮）应对齐在同一行。目前，由于顶部的长文本，中间列中的单选按钮被推低。我希望第一列和第三列中的单选按钮被按下以与中间列中的单选按钮对齐。

所有三列中的文字都可以更改。我不考虑任何表格解决方案。我希望看到一个CSS解决方案，因为所有控件都应该垂直对齐，当表单在智能手机上显示时，第一列和第三列中文本和控件之间的额外空间应该消失。这是jsfiddle中的代码

这是html代码

<div class="row">

    <div class="col-sm-4 center">
        <div class="text"> text 1</div>
        <div class="control"><input type="radio" name="test" /></div>
    </div>

    <div class="col-sm-4 center">
        <div class="text"> text 2 --- blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan blan </div>
        <div class="control"><input type="radio" name="test" /></div>
    </div>

    <div class="col-sm-4 center">
        <div class="text"> text 3</div>
        <div class="control"><input type="radio" name="test" /></div>
    </div>    
</div>

Answer 1

.text{
    height:200px;
}

DEMO

Answer 2

这里的a solution不使用固定高度，也不会更改您当前的标记。

.row {
    position: relative;
    padding-bottom: 1em;
}

我们需要稍后将单选按钮定位在相对于行的位置，因此我们将position设置为relative。

.row:after {
    clear: both; /*clearfix*/
    display: table;
    content: ' ';
}

对行应用clearfix，使其达到所需的高度。

.col-sm-4 {
    position: static;
}

将列的position设置为static，以便单选按钮不会相对于它定位。然后终于......

input[type='radio'] {
    position: absolute;
    bottom: 0;
}

将单选按钮完全相对于父对象放置相对位置（例如，行）。

为了将来参考，这可能是help。干杯！

在Bootstrap中通过CSS将几个元素对齐到底部的任何方法？

2 个答案: