ブートストラップで複数のロゴをラップするのを防ぐ4 xsのサイズ

Question

ほとんどの例では、ブランドロゴ以外のすべてを隠してトグルアイコンを表示しています。しかし、私は小さな画面に複数のアイコンが欲しいですが、現時点では十分なスペースがあってもxsサイズでラップします。

大きなアイコンを小さなアイコンで置き換えることもできますが、スペースが足りないので、これはどちらでも役に立ちません。

ブランドロゴと2つのアイコンは、単に同じ行にある必要があります。誰かが正しい方向に私を押してください。コードスニペットを独自のウィンドウで実行するだけで十分です（問題はちょうどxsサイズになります）。

.material-icons.md-24 { font-size: 24px; } 
 
.material-icons.md-48 { font-size: 48px; }

<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> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<header class="header"> 
 

 
    <nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center"> 
 

 
    <!--Logo--> 
 
    <a class="navbar-brand mr-auto" href="/" title="logo"> 
 
     <span>logo-img</span> 
 
    </a> 
 

 
    <!-- 
 
    the centered links in the header (only visible on bigger screens) 
 
    --> 
 
    <ul class="navbar-nav mx-auto justify-content-center hidden-sm-down"> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">link1</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">link2</a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="nav-link" href="#">login</a> 
 
     </li> 
 
    </ul> 
 

 
    <!-- the icons on the right (xs screens) 
 
    The two (and maybe more) icons SHOULD NOT WRAP 
 
    --> 
 
    <ul class="nav navbar-nav ml-auto justify-content-end hidden-sm-up"> 
 
     <li class="nav-item"> 
 
     <a class="btn"> 
 
      <i class="material-icons md-24" style="">mail_outline</i> 
 
     </a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="btn"> 
 
      <i class="material-icons md-24">favorite</i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 

 
    <!-- the icons on the right (bigger devices) --> 
 
    <ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down"> 
 
     <li class="nav-item"> 
 
     <a class="btn"> 
 
      <i class="material-icons md-48" style="">mail_outline</i> 
 
     </a> 
 
     </li> 
 
     <li class="nav-item"> 
 
     <a class="btn"> 
 
      <i class="material-icons md-48">favorite</i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 

 
    </nav> 
 
</header>

Answer 1

あなたは

https://www.codeply.com/go/beHGmETlkM

<header class="header"> 
    <nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center flex-row"> 
    <!--Logo--> 
    <a class="navbar-brand mr-auto" href="/" title="logo"> 
     <span>logo-img</span> 
    </a> 
    <!-- 
    the centered links in the header (only visible on bigger screens) 
    --> 
    <div class="navbar-collapse collapse"> 
     <ul class="navbar-nav mx-auto justify-content-center hidden-sm-down"> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">link1</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">link2</a> 
      </li> 
      <li class="nav-item"> 
      <a class="nav-link" href="#">login</a> 
      </li> 
     </ul> 
    </div> 

    <!-- the icons on the right (xs screens) 
    The two (and maybe more) icons SHOULD NOT WRAP 
    --> 
    <ul class="nav navbar-nav ml-auto flex-row justify-content-end hidden-sm-up"> 
     <li class="nav-item"> 
     <a class="btn"> 
      <i class="material-icons md-24" style="">mail_outline</i> 
     </a> 
     </li> 
     <li class="nav-item"> 
     <a class="btn"> 
      <i class="material-icons md-24">favorite</i> 
     </a> 
     </li> 
    </ul> 

    <!-- the icons on the right (bigger devices) --> 
    <ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down"> 
     <li class="nav-item"> 
     <a class="btn"> 
      <i class="material-icons md-48" style="">mail_outline</i> 
     </a> 
     </li> 
     <li class="nav-item"> 
     <a class="btn"> 
      <i class="material-icons md-48">favorite</i> 
     </a> 
     </li> 
    </ul> 
    </nav> 
</header> 

https://www.codeply.com/go/beHGmETlkM

... xsの画面に縦に積み重ねから、それを防ぐために、ナビゲーションバーで flex-rowと navbar-navを使用することができます