我正在使用twitter引导框架,并且bootstrap touchspin plugin。我想把触针放在一个可变高度的列的底部。
我试着添加了以下内容(比如this solution):

.row {
    position: relative;
}

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

但什么都没变。(see jsfiddle
为什么不起作用?你还有别的办法吗?
这里有一个jsfiddle,您可以尝试:http://jsfiddle.net/R5n9j/1/
实际产量
期望输出
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');
    });

});

最佳答案

通过切换到CSS表布局,您可以免费拥有相同高度的列,但不能相对定位“(可视)单元格”(至少在Firefox中),因此必须在“(可视)表上这样做”
EDIT2:.bootstrap-touchspin也显示为表,在Chrome中失败。在这个组件周围添加一个绝对定位的div(不再是组件本身)可以解决这个问题。
演示:http://jsfiddle.net/R5n9j/9/
兼容性为IE8+(由于/由于display: tabletable-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。见下面的萤火虫截图。否则,你的尝试是很好的;)

关于html - 如何在引导列中将元素垂直对齐到底部?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23534287/

10-12 12:34
查看更多