徽標下方的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; 進入導航欄標題類

Answer 2

您可以使用float: none或float: initial來完成此操作，這將刪除當前有效的左側float。

Answer 3

從我在這里看到的 告訴瀏覽器您想放置的位置是個問題。

1.使用CSS

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

2.使用快速定位類

位置靜態

相對位置

絕對位置

固定位置

位置粘性

3.浮動

浮動：無，浮動：初始

希望這個答案有幫助。

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>

任何問題或疑問，只需在我的答案下方的評論中提問