Question

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

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

＆＃13;

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

＆＃13;

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

Answer 1

修改

使用 em 单位来代替不同的显示：

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

＆＃13;
＆＃13;
.h1--small { line-height: 1.7em; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

<强> SOLUTION：

<h1> css属性line-height的计算值等于39.6px，因此您需要做的就是在<small>代码中定义相同的值：< / p>
line-height: 39.6px;

要检查h1元素的计算值，只需转到开发工具，选择你的h1，点击右上角的计算选项卡，然后查找行高;

CODE SNIPPET

＆＃13;
＆＃13;
.h1--small { line-height: 39.6px; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你应该使用外部CSS样式......但是如果你真的真的真的只想使用内置的bootstrap类，我会为你做一些有趣的事情！看看这个：

＆＃13;

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

＆＃13;

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

Answer 3

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

＆＃13;

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

＆＃13;

引导标头中的垂直对齐

3 个答案: