ナビゲーションバー内の項目を折りたたみから除外します

Question

私は左右両方のアイテムを持つBootstrap 4 navbarを持っています。これはどのように見えるのですか？

そして、これは、それが崩壊したときにどのように見えるかです。

それでは、私が欲しいのは崩壊のトグルボタンに合わせ右側になるようにサインアップログインボタン用です。どのようにすれば可能ですか？

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> 
     <button class="navbar-toggler ml-lg-5 ml-md-5 ml-sm-5" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 
     <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> 
      <ul class="navbar-nav ml-lg-5 ml-md-5 ml-sm-5"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="#">Home</a> 
       </li> 
      </ul> 
     </div> 
      <button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button> 
</nav> 

Answer 1

がボタンに明示的float-rightクラスを与える：

は、ここに私のコードです。あなたはまた、もう一つの方法は、ブレークポイントのHideとShowあるDocs

を確認し、ブレークポイントに応じて山車を設定することができます。この

<button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5 d-none d-lg-block d-xl-none" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button> 
<button class="btn btn-outline-custom mr-lg-5 mr-md-5 mr-sm-5 float-right d-lg-none d-xl-block" type="submit" data-toggle="modal" data-target="#signupModal">SIGN UP</button> 

最初のボタンを使用すると、大きな画面を持っている場合にのみlgこのcalss d-none d-lg-block d-xl-none

番目のボタンでは、これだけでlg未満の小さな画面に表示されます表示されますように、あなたは二つのボタンを持っている必要がありますd-lg-none d-xl-block私はまた、それを正しく動かすためにfloat-rightクラスを与えました。

詳細を見るhere