0

我正在尝试使用 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>

（这里也有一个小提琴）

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

编辑：我注意到如果我将导航放入 - 但 BS-Examples 都没有这样做，所以它肯定是错误的......

4

1 回答 1

0

I haven't work much with bootstrap 4 beta before but I don't believe you are doing it right, just took a quick look at the documentation here,

Navbar are formatted like:

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

And you can but your menu and content in a container. 

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

See fiddle

EDIT

To @Mbaas's comment, if you want the icon to be the link and not the text, use li and put the anchor tags around the icon.

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

You can remove the underline hover of the link by applying css like:

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

To make the text large as a h1 tag you can put it in a span with a class and apply css to it like:

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

And the css for bold-text could be something like:

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

fiddle

于 2017-10-24T09:06:26.530 回答