与 Bootstrap 3 垂直对齐
[英] vertical-align with Bootstrap 3
本文介绍了与 Bootstrap 3 垂直对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Twitter Bootstrap 3，当我想垂直对齐两个 div 时遇到问题，例如 - JSFiddle 链接:
<!-- 最新编译和缩小的 CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><!-- 可选主题--><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"><!-- 最新编译和缩小的 JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><div class="row"><div class="col-xs-5"><div style="height:5em;border:1px solid #000">大</div>
<div class="col-xs-5"><div style="height:3em;border:1px solid #F00">小</div>
Bootstrap 中的网格系统使用 float:left，而不是 display:inline-block，所以 vertical-align 属性没有工作.我尝试使用 margin-top 来修复它，但我认为这对于响应式设计来说不是一个好的解决方案.
解决方案
此答案提供了一个技巧，但我强烈建议您使用 flexbox(如 @Haschem 答案 中所述)，因为现在到处都支持它.
<块引用>
演示链接:
- 引导程序 3
- Bootstrap 4 alpha 6
您仍然可以在需要时使用自定义类:
.vcenter {显示:内联块；垂直对齐:中间；浮动:无；}
<div class="col-xs-5 col-md-3 col-lg-1 vcenter"><div style="height:10em;border:1px solid #000">Big</div></div><!----><div class="col-xs-5 col-md-7 col-lg-9 vcenter"><div style="height:3em;border:1px solid #F00">小</div>
引导
使用 inline-block 如果您在代码中留出真正的空间(例如 ...</div> </div>...).如果列大小加起来为 12，这个额外的空间会破坏我们的网格:
<div class="col-xs-6 col-md-4 col-lg-2 vcenter"><div style="height:10em;border:1px solid #000">Big</div>
<div class="col-xs-6 col-md-8 col-lg-10 vcenter"><div style="height:3em;border:1px solid #F00">小</div>
在这里，我们在 <div class="[...] col-lg-2"> 和 <div class="[...] col-lg-10">(一个回车和 2 个制表符/8 个空格).所以……
让我们踢这个额外的空间！
<div class="col-xs-6 col-md-4 col-lg-2 vcenter"><div style="height:10em;border:1px solid #000">Big</div></div><!----><div class="col-xs-6 col-md-8 col-lg-10 vcenter"><div style="height:3em;border:1px solid #F00">小</div>
注意到看似无用的注释<div> 元素之间的空白将占用布局空间，破坏网格系统.
注意:Bootply 已经更新
I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-5">
<div style="height:5em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-5">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using margin-top to fix it, but I think this is not a good solution for the responsive design.
解决方案
This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer), since it's now supported everywhere.
Demos link:
- Bootstrap 3
- Bootstrap 4 alpha 6
You still can use a custom class when you need it:
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
}
<div class="row">
<div class="col-xs-5 col-md-3 col-lg-1 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Bootply
Using inline-block adds extra space between blocks if you let a real space in your code (like ...</div> </div>...). This extra space breaks our grid if column sizes add up to 12:
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div>
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Here, we've got extra spaces between <div class="[...] col-lg-2"> and <div class="[...] col-lg-10"> (a carriage return and 2 tabs/8 spaces). And so...
Let's kick this extra space!!
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-2 vcenter">
<div style="height:10em;border:1px solid #000">Big</div>
</div><!--
--><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="height:3em;border:1px solid #F00">Small</div>
</div>
</div>
Notice the seemingly useless comments <!-- ... -->? They are important -- without them, the whitespace between the <div> elements will take up space in the layout, breaking the grid system.
Note: the Bootply has been updated
这篇关于与 Bootstrap 3 垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
