Bootstrap 3将文本alignment到底部

我试图在Bootstrap中得到一个设置，看起来像这样，我有文本与图像的底部alignment：

================================================ | | | #################### | | ##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> 

但是我最终会看到更像这样的东西，其中的文字是顶部alignment的：

 ================================================ | | | #################### ...And some text! | | ##THIS IS AN IMAGE## | | #################### | | | ================================================ 

我尝试了一些定位技巧来实现它，但是当我这样做时，它打破了Bootstrap的移动优先性。 当折叠到手机大小，我需要它捕捉到这个：

 ========================== | | | #################### | | ##THIS IS AN IMAGE## | | #################### | | | | ...And some text! | | | ========================== 

所以把它做成桌子真的不是一个select。

编辑：这是一个小提琴，约瑟夫Marikle在评论中提供：D http://jsfiddle.net/6WvUY/1/

Answer 1

我认为你最好的select是使用绝对定位和相对定位的组合。

这是一个小提琴： 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改为一个类。

Answer 2

我从其他SO问题收集了一些想法（主要从这里和这个CSS页面 ）

小提琴

这个想法是使用相对和绝对定位将您的行移动到底部：

 @media (min-width: 768px ) { .row { position: relative; } #bottom-align-text { position: absolute; bottom: 0; right: 0; }} 

display:flex选项是一个解决scheme，使div获得与其父母相同的大小。 另一方面，通过添加col-sx-12类，可以在小型设备上自动换行。 （这就是为什么媒体查询是需要的）

Answer 3

你可以这样做：

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> 

Answer 4

这是另一个解决scheme： 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; } 

Answer 5

我testing过的最简单的方法就是像下面这样添加一个<br> ：

 <div class="col-sm-6"> <br><h3><p class="text-center">Some Text</p></h3> </div> 

唯一的问题是当屏幕变小并且堆叠时会生成额外的换行符（由该生成的）。 但它是快速和简单的。