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. (这个答案是一个hack,但是我强烈建议您使用flexbox(如@Haschem answer中所述 ),因为现在它在任何地方都受支持。)
Demos link: (演示链接:)
- Bootstrap 3 (- 引导程序3)
- Bootstrap 4 alpha 6 (-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>...
). (如果在代码中...</div> </div>...
实际空间(例如...</div> </div>...
),则使用inline-block
会在块之间添加额外的空间。) This extra space breaks our grid if column sizes add up to 12: (如果列大小总计为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). (在这里,我们在<div class="[...] col-lg-2">
和<div class="[...] col-lg-10">
之间有多余的空格(回车符和2制表符/ 8个空格)。) And so... (所以...)
![在此处输入图片说明](https://stackoom.com/link/aHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8yWXpieS5wbmc=)
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>
![在此处输入图片说明](https://stackoom.com/link/aHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9YWlRKai5wbmc=)
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. (它们很重要 -没有它们, <div>
元素之间的空格将占据布局中的空间,从而破坏网格系统。)
Note: the Bootply has been updated (注意:Bootply已更新)
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…