我试图在Bootstrap中设置一个类似于此的设置,其中我的文本与图像的底部对齐:
================================================
| |
| #################### |
| ##THIS IS AN IMAGE## |
| #################### ...And some text! |
| |
================================================
所以我尝试了这个:
<div class="row">
<div class="col-sm-6">
<img src="~/Images/MyLogo.png" alt="Logo" />
</div>
<div class="col-sm-6">
<h3>Some Text</h3>
</div>
</div>
但我最终得到的东西看起来更像是这样,文字是顶部对齐的:
================================================
| |
| #################### ...And some text! |
| ##THIS IS AN IMAGE## |
| #################### |
| |
================================================
我尝试了一些定位技巧让它发挥作用,但是当我这样做时,它打破了Bootstrap的移动优先性。当折叠到手机大小时,我需要它来捕捉到这个:
==========================
| |
| #################### |
| ##THIS IS AN IMAGE## |
| #################### |
| |
| ...And some text! |
| |
==========================
因此,作为一个表格,这不是一个选择。
编辑:这是一个小提琴,由Joseph Marikle在评论中提供:D http://jsfiddle.net/6WvUY/1/
答案 0 :(得分:59)
我认为你最好的选择是使用绝对和相对定位的组合。
这是一个小提琴:http://jsfiddle.net/PKVza/2/
给出你的html:
<div class="row">
<div class="col-sm-6">
<img src="~/Images/MyLogo.png" alt="Logo" />
</div>
<div class="bottom-align-text col-sm-6">
<h3>Some Text</h3>
</div>
</div>
使用以下CSS:
@media (min-width: 768px ) {
.row {
position: relative;
}
.bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}
}
编辑 - 修复了CSS和JSFiddle的移动响应,并将ID更改为类。
答案 1 :(得分:7)
我从其他SO问题中收集了一些想法(主要来自here和this css page)
我们的想法是使用相对和绝对定位将您的线移到底部:
@media (min-width: 768px ) {
.row {
position: relative;
}
#bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}}
目前display:flex
选项是使div与其父级获得相同大小的解决方案。另一方面,通过添加col-sx-12
类,可以打破在小型设备上自动换行的自举功能。 (这就是需要媒体查询的原因)
答案 2 :(得分:6)
你可以这样做:
CSS:
#container {
height:175px;
}
#container h3{
position:absolute;
bottom:0;
left:0;
}
然后在HTML中:
div class="row">
<div class="col-sm-6">
<img src="//placehold.it/600x300" alt="Logo" />
</div>
<div id="container" class="col-sm-6">
<h3>Some Text</h3>
</div>
</div>
答案 3 :(得分:3)
这是另一种解决方案:http://jsfiddle.net/6WvUY/7/。
HTML:
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
</div>
<div class="col-sm-6">
<h3>Some Text</h3>
</div>
</div>
</div>
CSS:
.row {
display: table;
}
.row > div {
float: none;
display: table-cell;
}
答案 4 :(得分:-12)
我测试的最简单方法是添加<br>
,如下所示:
<div class="col-sm-6">
<br><h3><p class="text-center">Some Text</p></h3>
</div>
唯一的问题是当屏幕变小并堆叠时会产生额外的换行符(由<br>
生成)。但它快速而简单。