引导标题中的垂直对齐答案

【问题标题】：Vertical alignment in bootstrap header引导标题中的垂直对齐
【发布时间】：2016-06-30 11:54:23
【问题描述】：

我知道我可以使用一堆手动 CSS 来做到这一点，但我想知道是否有 Bootstrap 方法来做到这一点。

Bootstrap 网站说我可以“在任何带有通用 <small> 标记或 .small 类的标题中创建更轻的辅助文本。”所以我在<h1> 元素中尝试了这个，但是当我尝试将它浮动到右侧时，垂直对齐就会消失：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <nav class="navbar navbar-default navbar-static-top">
    Here's some navigation
  </nav>
  <header class="page-header">
    <h1>Main Heading <small class="pull-right">and smaller text</small></h1>
  </header>
</body>

我也尝试将这两个项目放在列中（例如.col-md-6），但这也使用浮点数，因此结果相同。有什么简单的方法吗？

【问题讨论】：

标签： css twitter-bootstrap vertical-alignment

【解决方案1】：

你应该使用外部 CSS 样式...但是如果你真的真的真的只想使用内置的引导类，我有一些有趣的东西给你！看看这个：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <nav class="navbar navbar-default navbar-static-top">
    Here's some navigation
  </nav>
  <header class="page-header">
    <h1>Main Heading
        <small class="pull-right">
          <h1 class="media">
            <small>and smaller text</small>
          </h1>
        </small>
    </h1>
  </header>
</body>

这不是一个好的解决方案。这只是一种好奇心。

【讨论】：

我实际上最终根据这个得出了一个答案，所以我将其标记为接受。感谢您的启发！

【解决方案2】：

编辑：

请改用 em 单位来处理不同的显示：

.h1--small {
  line-height: 1.7em;
}

.h1--small {
  line-height: 1.7em;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top">
  Here's some navigation
</nav>
<header class="page-header">
  <h1>Main Heading <small class="pull-right h1--small">and smaller text</small></h1>
</header>

解决方案：

<h1> css 属性line-height 的计算值等于39.6px，因此您只需在<small> 标记中定义相同的值即可：

line-height: 39.6px;

要检查你的 h1 元素的计算值，只需转到开发工具，选择你的 h1，点击右上角的计算选项卡并查找 line-height；

代码片段：

.h1--small {
  line-height: 39.6px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <nav class="navbar navbar-default navbar-static-top">
    Here's some navigation
  </nav>
  <header class="page-header">
    <h1>Main Heading <small class="pull-right h1--small">and smaller text</small></h1>
  </header>
</body>

【讨论】：

像素值很大程度上取决于显示尺寸和分辨率；将其修复为某个值可能很危险。

【解决方案3】：

玩弄卡米尔的答案，我想出了如何让它发挥作用。将.pull-right 类应用于块元素并将<small> 元素放入其中：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<body>
  <nav class="navbar navbar-default navbar-static-top">
    Here's some navigation
  </nav>
  <header class="page-header">
    <h1>Main Heading <div class="pull-right"><small>and smaller text</small></div></h1>
  </header>
</body>

【讨论】：