0
Ruby on Rails 5を実行していますが、私はブートストラップの宝石を使用しています。私が抱いている問題は、 私は私の部分的なもののうちの1つにhtmlを置くとき、私は非常に奇妙な 'nav-bar'を見ているということです。ブートストラップNavbarは非常に奇妙な形で表示されます
<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>
その後、私は非常に奇妙なnav-barを持っています。それは下の図のようです。 
このナビゲーションバーは、それが 
の下に、この画像のように見えるインライン化されることが最も重要なのはあなたの助けをいただき、ありがとうございます。
正常に動作します私は、HTMLあなたを試してみました残念ながらそれは良くないと思っていますが、まだこの問題があります。[ブートストラップの問題]（https://drive.google.com/file/d/0B0Q94paOTL1iMk9lcGtkTkk3STg/view） – violentr
他のCSSがあなたに影響している可能性がありますレイアウト。ナビゲーションバーの要素をスタイルする部分を削除してください。また、bootstrap.min.cssファイルとbootstrap.min.jsファイルを使用してください。私はそれがよりうまく動作することを願って... –