Bootstrap Navbar 以非常奇怪的形式显示

Question

我运行 Ruby on Rails 5 并使用引导 gem。我遇到的问题是 当我将 html 放入其中一个部分时，我的“导航栏”看起来很奇怪。

<html><head>
    <title>App</title>
    <link rel="stylesheet" media="all" href="/assets/application.self-09a09de7df140e59268bd2c94d4ba54f4e8477100ad6ca7894899b63e99bf8c7.css?body=1" data-turbolinks-track="reload">
    <script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/tether/tether.self-49a614f96d3d9b228d4f800376a8db0a8315c1f10eb759f66a528112980505de.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/tether.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap.self-4e71bfbf6aff83432bb0f204b1cfa3beaf9d05f0d2acf9ec752924a628245be1.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/util.self-ee646345d4a58a58a1c5f97a3def830f24884ebd628cedc00c5cc9bb748f8dcf.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/alert.self-8ec79d32a4387947ba9c697a802d190e85eaabd2d7868e188ceb32bfaff27090.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/button.self-11f2f59490a5ed1ee00730174836d887cf01ddd797cf2b080e7d9dd1f988faa3.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/carousel.self-a1068285d9397c8a3fe8911b395c0ca7eaa7d98460f68a32896dbdea5904f8ae.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/collapse.self-d36e6561deb41e4e98a568aa5be6b3d14a6d4d604d6923d3732ed8d97d734854.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/dropdown.self-9001a6392843799bd3f8fefa8f2b90bc2ea9e0a70cb5148039787b50b18abc51.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/modal.self-86f0500b4628eba403a8e8a2c31a642d399d7efebb27ccc40f03b0f98f458461.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/scrollspy.self-bc2becbc0f4b31f6fabf6aa80923e509fa9a0fb55165dac75333164564d619b2.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/tab.self-8c546e0109ea36cfbe17faff530986e24eb7043bd1237c64bcb8257f24b0285c.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/tooltip.self-35e74be099c220a4b49c8a825b32613a19641d8b4538a78e819a8b9a75de2b40.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/popover.self-23ed39658a0cf53b747d72cc537e52bc9fc33b3d8eab3872d38186e3631b519c.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap-sprockets.self-636159b35205da4142a43bc02d2849d77d3ac07a0946211585cde15a9c6ff21f.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/bootstrap/jquery.min.self-ad66c584c2469d2bb527ba7aef5893549f1554ccc8ab3ccb43bd09ce8c3bf7a1.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-1641ec3e8ea24ed63601e86efcca7f9266e09f390e82199d56aa7e4bd50e1aa9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-6e0514260c1aa76eaf252412ce74e63f68819fd19bf740595f592c5ba4c36537.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-4d37d7bcf4b0b32507438063ae47ba88dd0178863f7c7a2c7125b221eefea772.js?body=1" data-turbolinks-track="reload"></script>
  </head>

  <body>
    <nav class="navbar navbar-default navigation-clean">
  <div class="container">
    <div class="navbar-header"><a class="navbar-brand navbar-link" href="#">Company Name</a>
      <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
    </div>
    <div class="navbar-collapse collapse" id="navcol-1" aria-expanded="false">
      <ul class="nav navbar-nav navbar-right">
        <li class="active" role="presentation"><a href="#">First Item</a></li>
        <li role="presentation"><a href="#">Second Item</a></li>
        <li role="presentation"><a href="#">Third Item</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li role="presentation"><a href="#">First Item</a></li>
            <li role="presentation"><a href="#">Second Item</a></li>
            <li role="presentation"><a href="#">Third Item</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
</body></html>

之后我有一个非常奇怪的导航栏，如下图所示。

最重要的是这个导航栏是内联的，如下图所示

感谢您的帮助。

Answer 1

请尝试以下代码：

<div class="navbar-default" role="navigation">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">links toggle button</span>
        <span class="mdl-color--white white icon-bar"></span>
        <span class="mdl-color--white white icon-bar"></span>
        <span class="mdl-color--white icon-bar"></span>
    </button>
    <a href="#"><span class="navbar-brand">Company Name</span></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav" style="float: right;">
        <li><a href="#">First Item</a></li>
        <li><a href="#">Second Item</a></li>
        <li><a href="#">Third Item</a></li>
        <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
                Dropdown<span class="mdi mdi-chevron-down"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li role="presentation"><a href="#">First Item</a></li>
                <li role="presentation"><a href="#">Second Item</a></li>
                <li role="presentation"><a href="#">Third Item</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 2

---

您的代码运行良好

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="navbar-default" role="navigation">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">links toggle button</span>
        <span class="mdl-color--white white icon-bar"></span>
        <span class="mdl-color--white white icon-bar"></span>
        <span class="mdl-color--white icon-bar"></span>
    </button>
    <a href="#"><span class="navbar-brand">Company Name</span></a>
</div>
<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav" style="float: right;">
        <li><a href="#">First Item</a></li>
        <li><a href="#">Second Item</a></li>
        <li><a href="#">Third Item</a></li>
        <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li role="presentation"><a href="#">First Item</a></li>
            <li role="presentation"><a href="#">Second Item</a></li>
            <li role="presentation"><a href="#">Third Item</a></li>
          </ul>
        </li>
    </ul>
</div>