如何离开-align navbar-text？

Question

我正在尝试使用BS4（beta2）构建一个小页面。

<nav id="TOP" class="navbar navbar-light">
<span id="banner-logo" class="navbar-brand">
<span class="fa fa-bath fa-5x"></span>
</span>
<span id="banner-heading" class="navbar-text"><h1>
Wonderful page-title
</h1>
</span>
</nav>

（还有一个小提琴here）

不知怎的，我在导航的构造中遗漏了一些东西：我希望#banner-heading元素在图标旁边左对齐。为什么这不起作用？

编辑：我注意到如果我将导航器放入一个 - 但是BS-Examples都没有这样做，那么其他东西一定是错的......

Answer 1

我之前没有使用过bootstrap 4 beta，但我不相信你做得对，只是快速查看文档here，

Navbar的格式如下：

<nav class="navbar navbar-light bg-light">
 <a class="navbar-brand" href="#">
   <span class="fa fa-bath fa-3x"></span>
   Wonderful page-title
 </a>
</nav>

你可以将你的菜单和内容放在容器中。

<div class="container">
  <div class="row">
    <div class="col-md-3">
      My little menu
    </div>
    <div class="col-md-9">
      Main content area, 9 cols wide
    </div>
  </div>
</div>

请参阅fiddle

修改

要@ Mbaas的评论，如果您希望图标是链接而不是文本，请使用li并将锚标记放在图标周围。

<nav class="navbar navbar-light bg-light">
  <li class="navbar-brand">
    <a href="#">
      <span class="fa fa-bath fa-3x"></span> 
    </a>
      Wonderful page-title
  </li>
</nav>

您可以通过应用css来删除链接的下划线悬停：

.navbar-brand a{
  text-decoration: none;
}

要将文本设置为h1标记，您可以将其放在带有类的范围内，并将css应用于它，如：

 <span class="bold-text">
      Wonderful page-title
 </span>

bold-text的css可能类似于：

.bold-text{
   font-weight:bold;
   font-size: 40px;
}

fiddle