有没有办法通过引导中的CSS将一些元素与底部对齐？

我正在使用Bootstrap创建一个HTML表单，该表单在同一行中有3个控件。所有控件（单选按钮）应在同一行中对齐。目前，中间列中的单选按钮由于其上面的长文本而被推低。我希望第一列和第三列中的单选按钮被按下，以便与中间列中的单选按钮对齐。 所有三列中的文本都可以更改。我没有考虑任何表格解决方案。我希望看到一个CSS解决方案，因为所有控件都应该垂直对齐，当表单显示在智能手机上时，第一列和第三列中文本和控件之间的额外空间应该消失。下面是JSFIDLE中的代码

下面是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>

文本1
课文2--布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰布兰
文本3

这是一个不使用固定高度且不更改当前标记的方法

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

我们需要单选按钮稍后相对于行进行定位，因此我们将其设置为

位置

到

相对

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

对行应用clearfix，使其获得所需的高度

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

将列的

位置

设置为

静态

，这样单选按钮就不会相对于它定位。最后

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

使用相对定位（例如，行）将单选按钮相对于其父按钮绝对定位

---

为供日后参考，本文件可供参考。干杯

试着给你的答案添加更多的解释，让它更清晰。正如在帖子中所说，文本内容可能会改变，我不能给它设置一个固定的高度。

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