Question

我正在使用twitter-bootstrap框架和bootstrap touchspin plugin。我想在一个.col-md-6列的底部对齐touchged，其中可变高度。

我尝试添加以下内容（例如this solution）：

.row {
    position: relative;
}

.bootstrap-touchspin {
    position: absolute;
    bottom:0;
    right:0;
}

但没有任何改变。（see jsfiddle）

为什么不起作用？你有其他办法吗？

这是一个jsfiddle，您可以尝试： http://jsfiddle.net/R5n9j/1/

实际输出

enter image description here

渴望输出

enter image description here

HTML

<div class="container">
    <div class="row">
        <div class="col-md-7">
            <div id="form-guardar-medidas">
                <ul class="nav nav-tabs">
                    <li class="active"><a href="#tab1" id="add-medida-medir">Tab1</a>

                    </li>
                    <li><a href="#tab2">Tab2</a>

                    </li>
                </ul>
                <div id='content' class="tab-content">
                    <div class="tab-pane active fade in" id="tab1">
                        <div class="row">
                            <div class="col-md-6">
                                <img class="img-responsive" src="http://placehold.it/200x200">
                            </div>
                            <div class="col-md-6">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit mattis pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
                                <input id="input-cm" type="text" class="input-lg" name="input-cm">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="tab2">Hello tab2</div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

body{
    padding: 20px;
}

.tab-content {
    border: 1px solid #ccc;
    padding: 15px;
}

JS

$(document).ready(function () {
    $("input[name='input-cm']").TouchSpin();

    $('.nav-tabs a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

});

Answer 1

通过切换到CSS表格布局，您可以免费获得相同高度的列，但不能相对定位＆＃34;（可视）单元格＆＃34; （至少在Firefox中）所以你必须在＆＃39;（可视）表格上做到这一点＆＃34;

EDIT2：.bootstrap-touchspin也显示为表格，但在Chrome中失败。在这个组件周围添加一个div，它将被绝对定位（而不再是组件本身）解决了这个问题。

演示：http://jsfiddle.net/R5n9j/9/
兼容性是IE8 +（因为/感谢display: table和table-cell）

HTML

<div class="table pos-reference">
    <div class="cell">
        <img class="img-responsive" src="http://placehold.it/200x200">
    </div>
    <div class="cell has-touchspin">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit mattis pretium. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
        <div class="pos-abs">
            <input id="input-cm" type="text" class="input-lg" name="input-cm">
        </div>
    </div>
</div>

CSS

.table {
    display: table;
    table-layout: fixed;
}
.pos-reference {
    position: relative;
}
.cell {
    display: table-cell;
    vertical-align: top;
}
.has-touchspin {
    height: 100%;
    padding-bottom: 50px; /* Avoids superposition of content and absolutely positioned touchspin */
}
.pos-abs {
    position: absolute;
    bottom: 0;
    border: 1px solid #F00;
}

编辑：说明您尝试定位.input-group失败的原因：TWBS .col-AZ-NN已经相对定位，因此定位到.input-group的最近祖先不是你的那个设置.col-md-6。请参阅下面的Firebug屏幕截图。否则，你的尝试是好的;）

Twitter Bootstrap is positioning relatively all its columns, as shown in Firebug

Answer 2

最简单的方法是使用flex：

.tab-pane .row{
    display:flex;
}

如果您注意到标签内两个col-md-6容器的高度，它们不相等，使用时flex会对其子容器应用相同的高度。

<强> DEMO

限制：

Safari浏览器不支持flex属性。

Answer 3

我的解决方案是：

我已将col1和col2个ID添加到每个列中，并且使用js设置相同的高度。

col1h = $("#col1").height();
col2h = $("#col2").height();

if (col1h > col2h) {
    def_height = col1h;
} else {
    def_height = col2h;
}

$("#col1,#col2").height(def_height);

将left: 15px;添加到.bootstrap-touchspin。

结果http://jsfiddle.net/R5n9j/16/embedded/result

如何在引导列中垂直对齐元素到底部？

3 个答案:

限制：