CSS：從摺疊菜單中排除中心導航欄項目

我有一個導航欄，其中包含5個元素，標誌位於中心。當屏幕尺寸爲< 769px並摺疊時，我希望將徽標從collpased菜單中刪除，並顯示在頁面的左上角。CSS：從摺疊菜單中排除中心導航欄項目

<!-- jQuery --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
    </div> 
 

 
    <div class="row collapse navbar-collapse" id="collapsible-navbar"> 
 

 
     <div class="col-sm-2 text-center"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
      <li class="navbar-link"><a href="#" class="navbar-link-header">1</a> 
 
      </li> 
 
      <ul class="dropdown-nav row clients"> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a> 
 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 

 
     <div class="col-sm-2"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
      <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a> 
 
      </li> 
 
      <ul class="dropdown-nav row locations"> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a> 
 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 

 
     <div class="col-sm-4 text-center logo"> 
 
     <img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt="" /> 
 
     </div> 
 

 
     <div class="col-sm-2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a> 
 
      </li> 
 
      <ul class="dropdown-nav row information"> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">5</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">6</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">7</a> 
 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">8</a> 
 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 

 
     <div class="col-sm-2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a> 
 
      </li> 
 
      <ul class="dropdown-nav row sign_in"> 
 
      <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a> 
 
      </li> 
 
      <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a> 
 
      </li> 
 
      <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a> 
 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</nav>

來源

2015-10-08 Jeremy Thomas

一個快速的建議是，給標誌固定位置和偏移頂部和左側。 –

最簡單的解決辦法是把你想讓他們的使用顯示屬性來顯示和在媒體查詢隱藏他們兩個圖像。

查看示例。

@media (min-width: 768px) { 
 
    .navbar .navbar-brand { 
 
    display: none; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsible-navbar"> <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 

 
     </button> 
 
     <a class="navbar-brand" href="#block-one"> 
 
     <img src="http://placehold.it/350x150/f00" width="152" height="20" alt="" /> 
 
     </a> 
 

 
    </div> 
 
    <div class="row collapse navbar-collapse" id="collapsible-navbar"> 
 
     <div class="col-sm-2 text-center"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
      <li class="navbar-link"><a href="#" class="navbar-link-header">1</a> 
 

 
      </li> 
 
      <ul class="dropdown-nav row clients"> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 1</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 2</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 3</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Client 4</a> 
 

 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 
     <div class="col-sm-2"> 
 
     <ul class="nav navbar-nav navbar-left"> 
 
      <li class="navbar-link"><a href="#" class="navbar-link-header">Locations</a> 
 

 
      </li> 
 
      <ul class="dropdown-nav row locations"> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Newton, MA</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Peadbody, MA</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Houston, TX</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">Dallas, TX</a> 
 

 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 
     <div class="col-sm-4 text-center logo hidden-xs"> 
 
     <img src="http://placehold.it/350x150/f00" width="152" height="75" alt="" /> 
 
     </div> 
 
     <div class="col-sm-2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="navbar-link"><a href="#" class="navbar-link-header">Information</a> 
 

 
      </li> 
 
      <ul class="dropdown-nav row information"> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">5</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">6</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">7</a> 
 

 
      </li> 
 
      <li class="col-md-3 dropdown-nav-link"><a href="#" class="dropdown-link-a">8</a> 
 

 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 
     <div class="col-sm-2"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li class="navbar-link"><a href="#" class="navbar-link-header">Sign In</a> 
 

 
      </li> 
 
      <ul class="dropdown-nav row sign_in"> 
 
      <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">A</a> 
 

 
      </li> 
 
      <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">B</a> 
 

 
      </li> 
 
      <li class="col-md-4 dropdown-nav-link"><a href="#" class="dropdown-link-a">C</a> 
 

 
      </li> 
 
      </ul> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

來源

2015-10-08 16:17:42 vanburen

我建議你頁面的左上方位置的第二圖像，即僅在XS和SM斷點可見。你應該在你的代碼的頂部：

<img src="smallw_red_shaddow_small.jpg" width="152" height="75" alt="" class="visible-xs visible-sm" />

來源

2015-10-08 16:09:35

CSS：從摺疊菜單中排除中心導航欄項目

回答

相關問題