bootstrap header 中的垂直对齐

Question

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

Bootstrap 网站说我可以，"create lighter, secondary text in any heading with a generic <small> tag or the .small class." 所以我在 <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），但这也使用了浮点数，所以结果相同。有什么简单的方法可以做到这一点吗？

Answer 1

编辑：

改为使用 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 元素的计算值，只需转到开发工具，select 你的 h1，单击右上角的计算选项卡并查找行高；

代码片段：

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

Answer 2

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

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

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

Answer 3

通过研究 Kamil 的回答，我找到了解决方法。将 .pull-right class 应用于块元素并将 <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>

bootstrap header 中的垂直对齐

Vertical alignment in bootstrap header

css

vertical-alignment

twitter-bootstrap