ブートストラップを使用しているときにモバイルビューでインライン表示要素を表示するnavbar collapse

Question

ソーシャルメディアアイコン（左）とロゴ（中央）をブートストラップのモバイル/テーブルビューに適切に揃える方法がわかりません。モバイルビューに切り替えるときにもロゴとバーガーメニューの横にあるアイコンが表示されるようにしたいが、それは私のために適切に配置されず、モバイルビューに入るときには水平ではなく垂直に表示される。

デスクトップビュー：

モバイルビュー： これは私のcss/htmlです：

/* Style for "Signup Rectangle" */ 
 
.sign-up:hover, .log-in:hover { 
 
    cursor: pointer; 
 
    border: 1px solid #ffffff; 
 
    text-align: center; 
 
} 
 

 
/* Style for "SIGN UP" */ 
 
.sign-up { 
 
    color: #ffffff; 
 
    font-family: Raleway; 
 
    font-size: 13px; 
 
    font-weight: 500; 
 
    text-transform: uppercase; 
 
} 
 

 
/* Style for "LOG IN" */ 
 

 
.log-in { 
 
    color: #ffffff; 
 
    font-family: Raleway; 
 
    font-size: 13px; 
 
    font-weight: 500; 
 
    text-transform: uppercase; 
 
} 
 

 
/* Style for "Linkedin, Twitter, Facebook" */ 
 
.instagram-logo, .twitter-logo, .facebook-logo { 
 
    width: 20px; 
 
    height: 21px; 
 
    filter: invert(100%); 
 
} 
 

 
.logo { 
 
    width: 128px; 
 
    height: 53px; 
 
} 
 

 
.navbar-container { 
 
    padding-top: 18px !important; 
 
} 
 

 
.panorama { 
 
    padding-top: 140px; 
 
    height: 100vh; 
 
    min-height: 400px; 
 
} 
 

 
.affix { 
 
    -webkit-transition: padding 0.2s ease-out; 
 
    -moz-transition: padding 0.2s ease-out; 
 
    -o-transition: padding 0.2s ease-out; 
 
    transition: padding 0.2s ease-out; 
 
} 
 

 
.affix-top { 
 
    background: transparent; 
 
    border-color: transparent; 
 
    padding: 15px; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 

 
.icon-bar { 
 
    background-color:#fff !important; 
 
} 
 

 
.affix-top .nav > li > a { 
 
    color: #000; 
 
    filter: invert(100%); 
 
} 
 

 
.navbar-nav > li > a { 
 
    padding-bottom: 35px; 
 
} 
 

 
.affix-top .navbar-collapse { 
 
    border-color: transparent; 
 
    box-shadow: initial; 
 
} 
 

 
/*************MEDIA QUERIES **************/ 
 

 
@media (min-width: 768px) { 
 
    .navbar-nav.navbar-center { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translatex(-50%); 
 
    } 
 
}

<nav> 
 
    <div class="container-fluid"> 
 
    <div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="400"> 
 
     <div class="container"> 
 
     <div class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav navbar-container"> 
 
      <li><a href="#"><img class="instagram-logo" src="{{route('cacheImage', ['newDesign', 'instagram.png']) }}"></a></li> 
 
      <li><a href="#"><img class="facebook-logo" src="{{route('cacheImage', ['newDesign', 'facebook.png']) }}"></a></li> 
 
      <li><a href="#"><img class="twitter-logo" src="{{route('cacheImage', ['newDesign', 'twitter.png']) }}"></a></li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-header navbar-center"> 
 
      <li> 
 
       <a href="#"> 
 
       <img class="na-logo" alt="" src="{{route('cacheImage', ['newDesign', 'logo.png']) }}"> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-right navbar-nav navbar-container"> 
 
      <li> 
 
       <a class="sign-up">SIGN UP</a> 
 
      </li> 
 
      <li> 
 
       <a class="log-in">LOG IN</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!-- Mobile Burger Menu --> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-burger-menu"> 
 
       <span class="sr-only">Navigation Menu</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <ul id="navbar-burger-menu" class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
      </div> 
 
     <!-- Mobile Burger Menu End --> 
 
     <!-- Mobile/Table view End --> 
 
     </div> 
 
    </div><!-- /.navbar --> 
 
    </div><!-- /.container-fluid --> 
 
    <section class="panorama" style="background: url({{route('cacheImage', ['newDesign', 'panorama.png']) }}) no-repeat; background-size:cover; background-position:center;"> 
 
    <div class="container"> 
 
     <h1 class="text-center">Hello.</h1> 
 
    </div> 
 
    </section><!-- panorama navigation section end --> 
 
</nav><!-- .navbar end -->

誰もがこれを助けることができますか？

Answer 1

よろしくお願いします。左メニュー、ロゴ中心、右にログイン。その下のハンバーガースタックは全幅メニューを開きます。

左のメニューを左に、右を右にフローティングしました。真ん中にロゴを配置するには、それを絶対に配置し、ロゴの幅の半分から左に50％を設定します。私は、ブートストラップが自動的に置く灰色の背景を取り除くためにnavbarのデフォルトを外しました。また、トップ3のulが入っていたnavbar-collapse divの崩壊を取りました。そうすれば、モバイルでは消えません。私は左と右のメニューの中の李のインラインブロックを表示するようにしたので、彼らはお互いの隣にあるでしょう。あなたのハンバーガースタックのドロップダウンメニューは絶対的に配置されているので、私は右に追加しました。私はそれがほとんどすべてだったと思う。

.navbar-left{ 
 
    float:left; 
 
} 
 
.navbar-left.nav>li, .navbar-right.nav>li{ 
 
    display:inline-block; 
 
} 
 
.navbar-right{ 
 
    float:right; 
 
} 
 
.navbar-center{ 
 
    position: absolute; 
 
    left: calc(50% - 25px); 
 
} 
 
#navbar-burger-menu{ 
 
    right:0; 
 
} 
 
/* Style for "Signup Rectangle" */ 
 
.sign-up:hover, .log-in:hover { 
 
    cursor:pointer; 
 
    border: 1px solid #ffffff; 
 
    text-align:center; 
 
} 
 

 
/* Style for "SIGN UP" */ 
 
.sign-up { 
 
    color: #ffffff; 
 
    font-family: Raleway; 
 
    font-size: 13px; 
 
    font-weight: 500; 
 
    text-transform: uppercase; 
 
} 
 

 
/* Style for "LOG IN" */ 
 

 
.log-in { 
 
    color: #ffffff; 
 
    font-family: Raleway; 
 
    font-size: 13px; 
 
    font-weight: 500; 
 
    text-transform: uppercase; 
 
} 
 

 
/* Style for "Linkedin, Twitter, Facebook" */ 
 
.instagram-logo, .twitter-logo, .facebook-logo{ 
 
    width: 20px; 
 
    height: 21px; 
 
    filter: invert(100%); 
 
} 
 

 
.logo { 
 
    width: 128px; 
 
    height: 53px; 
 
} 
 

 
.navbar-container { 
 
    padding-top:18px !important; 
 
} 
 

 
.panorama { 
 
    padding-top:140px; 
 
    height:100vh; 
 
    min-height:400px; 
 
} 
 

 
.affix { 
 
    -webkit-transition:padding 0.2s ease-out; 
 
    -moz-transition:padding 0.2s ease-out; 
 
    -o-transition:padding 0.2s ease-out; 
 
    transition:padding 0.2s ease-out; 
 
} 
 

 
.affix-top { 
 
    background:transparent; 
 
    border-color:transparent; 
 
    padding: 15px; 
 
    -webkit-transition:all 0.5s ease; 
 
    -moz-transition:all 0.5s ease; 
 
    -o-transition:all 0.5s ease; 
 
    transition:all 0.5s ease; 
 
} 
 

 
.icon-bar { 
 
    background-color:#fff !important; 
 
} 
 

 
.affix-top .nav > li > a { 
 
    color: #000; 
 
    filter: invert(100%); 
 
} 
 

 
.navbar-nav > li > a { 
 
    padding-bottom:35px; 
 
} 
 

 
.affix-top .navbar-collapse { 
 
    border-color:transparent; 
 
    box-shadow:initial; 
 
} 
 

 
/*************MEDIA QUERIES **************/ 
 

 
@media (min-width: 768px) { 
 
    .navbar-nav.navbar-center { 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translatex(-50%); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav> 
 
    <div class="container-fluid"> 
 
    <div class="navbar navbar-fixed-top" data-spy="affix" data-offset-top="400"> 
 
     <div class="container"> 
 
     <div class="navbar-collapse "> 
 
      <ul class="nav navbar-nav navbar-container navbar-left"> 
 
      <li><a href="#"><img class="instagram-logo" src="http://www.fillmurray.com/100/100"></a></li> 
 
      <li><a href="#"><img class="facebook-logo" src="http://www.fillmurray.com/100/100"></a></li> 
 
      <li><a href="#"><img class="twitter-logo" src="http://www.fillmurray.com/100/100"></a></li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-header navbar-center"> 
 
      <li> 
 
       <a href="#"> 
 
       <img class="na-logo" alt="" src="http://www.fillmurray.com/50/50"> 
 
       </a> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-right navbar-nav navbar-container"> 
 
      <li> 
 
       <a class="sign-up">SIGN UP</a> 
 
      </li> 
 
      <li> 
 
       <a class="log-in">LOG IN</a> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     <!-- Mobile Burger Menu --> 
 
      <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-burger-menu"> 
 
       <span class="sr-only">Navigation Menu</span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
      </button> 
 
      <ul id="navbar-burger-menu" class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
      </div> 
 
     <!-- Mobile Burger Menu End --> 
 
     <!-- Mobile/Table view End --> 
 
     </div> 
 
    </div><!-- /.navbar --> 
 
    </div><!-- /.container-fluid --> 
 
    <section class="panorama" style="background: url(http://www.fillmurray.com/g/200/300) no-repeat; background-size:cover; background-position:center;"> 
 
    <div class="container"> 
 
     <h1 class="text-center">Hello.</h1> 
 
    </div> 
 
    </section><!-- panorama navigation section end --> 
 
</nav><!-- .navbar end -->