标志下方的Bootstrap 3导航栏

Question

我是Bootstrap 3的新手，我还在学习。直到现在我设法创建一个带有徽标和链接的简单导航栏。我现在正试图将徽标放在上方，我的导航栏位于徽标下方。我已经使用了HTML中断，但这只是间隔我的条形码。

代码：

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">

    <div class="navbar-header">
        <a class="navbar-brand" href="#">Super Signals</a>
    </div>
    <br>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Targets</a></li>
      <li><a href="#">Contact</a></li>
    </ul>

  </div>
</nav>

这就是我现在所拥有的：

这就是我想要的：

Answer 1

将float: initial;添加到navbar-header类

Answer 2

您可以使用float: none或float: initial来完成此操作，这将删除当前有效的左浮动。

Answer 3

从我在这里看到的。这是告诉浏览器您想要定位的问题。

<强> 1。使用CSS

https://www.w3schools.com/css/css_positioning.asp

<强> 2。使用快速定位课程

位置静电，

位置相对，

位置是绝对的，

位置固定，

位置粘性，

第3。浮

float：none，float：initial

希望这个答案有所帮助。

Answer 4

使用此代码并将h1标签设置为您的要求

<div class="container"><h1>Super Signals</h1></div>    
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Targets</a></li>
          <li><a href="#">Contact</a></li>
        </ul>

  </div>
</nav>

任何问题或疑问只需在我的回答下面发表评论