徽标下方的 Bootstrap 3 导航栏答案

【问题标题】：Bootstrap 3 navbar below logo徽标下方的 Bootstrap 3 导航栏
【发布时间】：2018-07-27 19:04:52
【问题描述】：

我是 Bootstrap 3 的新手，我还在学习。到目前为止，我设法制作了一个带有徽标和链接的简单导航栏。我现在正试图将我的徽标放在徽标上方，将导航栏放在徽标下方。我使用了 HTML 中断，但这只是间隔我的 bar downwords。

代码：

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

这就是我现在拥有的：

这就是我想要的：

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 navbar

【解决方案1】：

将float: initial; 添加到导航栏标题类

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

1.使用 CSS

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

2。使用快速定位类

位置-静态，

相对位置，

绝对位置，

位置固定，

位置粘性，

3。浮动

浮动：无，浮动：初始

希望这个答案有帮助。

【讨论】：

【解决方案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>

任何问题或问题都可以在我的答案下方的评论中提问

【讨论】：