gpt4 book ai didi

html - 如何将元素垂直对齐到 Bootstrap 列的底部?

转载 作者:行者123 更新时间:2023-11-28 04:55:49 29 4
gpt4 key购买 nike

我正在使用 twitter-bootstrap 框架,并且 bootstrap touchspin plugin .我想将 touchspin 对齐在 .col-md-6 列的底部,该列具有可变高度

我尝试添加以下内容(如 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');
});

});

最佳答案

通过切换到 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 已经相对定位,因此最接近 的祖先code>.input-group被定位的不是你设置的而是.col-md-6。请参阅下面的 Firebug 屏幕截图。否则,您的尝试是一个很好的尝试;)

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

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

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com