Bootstrap Navbar zeigt in sehr seltsamer Form

Ich laufe Ruby on Rails 5 und ich benutze bootstrap gem. Das Problem, das ich habe, ist das , wenn ich das HTML in eines meiner Partials einsetze, habe ich sehr komisches schauendes "nav-bar".Bootstrap Navbar zeigt in sehr seltsamer Form

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

Danach habe ich eine sehr seltsame Nav-bar es sieht aus wie auf dem Bild unten.

Das wichtigste ist, dass diese nav-Bar ist inline es unter

Vielen Dank für Ihre Hilfe, wie dieses Bild aussieht.

Quelle

2016-11-05 violentr

Bitte versuchen Sie den folgenden Code:

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

Quelle

2016-11-05 21:56:33

ich Ihnen HTML gerade versuchte, Leider sieht es nicht gut aus, habe immer noch dieses Problem, siehe Link [bootstrap issue] (https://drive.google.com/file/d/0B0Q94paOTL1iMk9lcGtkTkk3STg/view) – violentr

Owe, es kann sein, dass andere CSS deine beeinflussen Layout. Könnten Sie bitte die Teile entfernen, wo sie ein Element in der Navigationsleiste stylen? Bitte verwenden Sie auch die Dateien bootstrap.min.css und bootstrap.min.js. Ich hoffe, es funktioniert besser ... –

Ihr Code funktioniert gut

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

Quelle

2016-11-06 05:00:45

sicher einige andere css Bootstrap Styling in Ihrem Code überschreiben –

Bootstrap Navbar zeigt in sehr seltsamer Form

Antwort

Verwandte Themen