2017-04-09 16 views
0

これは私の初めてのStackOverflowでの質問ですので、私はこの質問に既に尋ねられている場合は事前にお詫びします(私はしばらく見て、何も関係は見られませんでした)。 私は現在、Bootstrap 4 Alphaを使用していますが、Navbarを表示しようとしていますが、1行ではなく2行で表示しています。私はまっすぐに、ブートストラップ4のWebサイトからナビゲーションバーコードを使用し、二行Bootstrap 4 2本線のNavbar

Two line navbar

で次のようにしかし、それはまだ私はjQueryのを持っているので、私は、ファイルの中で何かが含まれていない場合、私は、この時点ではわからないんだけど示し、Tether、Bootstrap JS、bootstrap.min.css、スタイリングのないscssファイルがあります。誰かがNavbarがまだ直線上に表示されていない理由を理解するのを助けてくれますか?事前

+1

へようこそSO! [お問い合わせ方法](https://stackoverflow.com/help/mcve)をご覧ください – bhansa

+1

コードを教えてください。 – JoostS

答えて

0

おかげでコードの下にこれを試してみてください。それは完璧に動作しており、あなたが望む出力を得ることができます。

<html> 
<head> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js""></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js""></script> 
</head> 


<body> 
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
     <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
     <span class="navbar-toggler-icon"></span> 
     </button> 
     <a class="navbar-brand" href="#">Navbar</a> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
     <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link disabled" href="#">Disabled</a> 
      </li> 
     </ul> 
     <form class="form-inline my-2 my-lg-0"> 
      <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
     </form> 
     </div> 
    </nav> 
</body> 

出力

Here is the output.

+0

私はこれを使用したと思っていましたが、何か変わってしまいました。全然よかったです。 – vski

+0

もしあなたがまだ私のために働いていたら、 –

関連する問題