スワップのdivは、私が行くように、私は（トグルアイコン）メニューが欲しい</p> <p><a href="https://i.stack.imgur.com/4njuk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4njuk.png" alt="enter image description here"></a></p> <p>下回っしかし、モバイルビューのような、3つの要素を持つヘッダーバーを持ちたいモバイルビュー

Question

に右から左、左とロゴは来るべき中間。プッシュして引っ張ってみました。しかし、それは私にとってはうまくいかない。とにかく私はこれを達成することができますか？

ここに私のコードです。参考までに、まだ別のメディアクエリを追加していません。ブートストラップクラスを使用するだけです。

<div class="row d-flex flex-nowrap" style="background-color: #2B3536;"> 
    <div class="col-lg-1 col-md-1 col-sm-2 col-2 align-self-center"><img src="https://dummyimage.com/127x50/2b3536/fff"></div> 
    <div class="col-lg-8 col-md-9 col-sm-8 col-8 order-sm-first"> 
     <nav class="navbar navbar-fixed-top navbar-toggleable-sm navbar-expand-sm"> 
      <div class="container d-flex flex-row flex-md-nowrap flex-wrap"> 
       <a href="#" class="hidden-md-up mr-3" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"> 
       <i class="fa fa-bars fa-lg text-white"></i> 
       </a> 
       <!--<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
       </button>--> 
       <div class="collapse navbar-collapse" id="navbarNavDropdown"> 
       <ul class="navbar-nav header-nav"> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">Menu 1</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">Menu 2</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">Menu 3</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">Menu 4</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">About Us</a> 
        </li> 
        <li class="nav-item"> 
        <a class="nav-link" href="#">Contact Us</a> 
        </li> 
        <!--<li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Dropdown link 
        </a> 
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="#">Action</a> 
         <a class="dropdown-item" href="#">Another action</a> 
         <a class="dropdown-item" href="#">Something else here</a> 
        </div> 
        </li>--> 
       </ul> 
       </div> 
      </div> 
     </nav> 
    </div> 
    <div class="col-lg-3 col-md-2 col-sm-2 col-2 align-self-center"> 
     <div class="input-group"> 
      <input class="form-control hidden-md-down" 
       placeholder="I'm looking for"> 
      <div class="input-group-addon top-search-addon"><i class="fa fa-search fa-search-white"></i></div> 
     </div> 
    </div> 
</div> 

Answer 1

あなたは

.navbar-brand{ 
    padding-top:8px; 
} 
.navbar-brand img{ 
    height:35px; 
    width:35px 
} 

@media (max-width:767px) { 
    .navbar-brand{ 
    position: absolute; 
    left: 40%; 
    } 
} 

.navbar-toggle { 
    float: left; 
} 

あなたが生きているデモを見ることができるスタイルのCSSファイルにメディアクエリを追加する必要がありますmenu design