与 Bootstrap 3 垂直对齐

小编典典

与 Bootstrap 3 垂直对齐

all

我正在使用 Twitter Bootstrap 3，当我想垂直对齐两个时遇到问题div，例如“ JSFiddle
链接” ：

<!-- 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>

Bootstrap 中的网格系统使用float: left, not display:inline-block，因此该属性vertical- align不起作用。我尝试使用margin-top它来修复它，但我认为这对于响应式设计来说不是一个好的解决方案。

阅读 129

2022-02-28

共1个答案

小编典典

这个答案提出了一个技巧，但我强烈建议您使用 flexbox（如@Haschem
答案中所述），因为它现在在任何地方都受支持。

演示链接：
- Bootstrap 3
- Bootstrap 4 alpha 6

您仍然可以在需要时使用自定义类：

.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>

引导层

inline-block如果您在代码中留出真实空间（如...</div> </div>...），则使用会在块之间添加额外的空间。如果列大小加起来为
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>

在这里，我们在<div class="[...] col-lg-2">和之间有额外的空格<div class="[...] col- lg-10">（回车和 2 个制表符/8 个空格）。所以…

在此处输入图像描述

让我们踢掉这个额外的空间！！

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

在此处输入图像描述

注意到那些看似无用的评论了吗？它们很重要
——没有它们，<div>元素之间的空白将占用布局中的空间，破坏网格系统。

注意：Bootply 已更新

2022-02-28