如果左側爲200px，如何設置寬度爲100％的正確內容？

好吧，我有這個小提琴：https://jsfiddle.net/9jb3Lp4k/。我的問題是，在小型設備上，當我將鼠標懸停在左側菜單上時，我的右側菜單繼續朝下方移動。我可以解決這個問題嗎？這樣我就可以獲得可重複的正確內容。任何建議？如果左側爲200px，如何設置寬度爲100％的正確內容？

<nav class="navbar navbar-inverse sidebar" role="navigation"> 
    <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <span class="navbar-brand"> <img src="{{asset('/assetsfront/img/night-life.png')}}"></span> 


     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="user-info"> 
       <img src="{{asset('/assetsfront/img/defaultuser.png')}}"> 
       <span class="username">username</span> 
      </div> 



     <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Galerija<span class="caret"></span><span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-picture-o"></span></a> 
        <ul class="dropdown-menu forAnimate" role="menu"> 
         <li><a href="/user/profile">Pregledaj galerije <span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-eye"></span></a></li> 
         <li><a href="/gallery/add">Dodaj galeriju <span style="font-size:18px;margin-right: 2px;" class="pull-right hidden-xs showopacity fa fa-plus"></span></a></li> 
         <li><a href="/gallery/edit">Izmijeni galeriju<span style="font-size:18px;" class="pull-right hidden-xs showopacity fa fa-edit"></span></a></li> 
        </ul> 
       </li> 
       <li ><a href="#">Logout<span style="font-size:16px;" class="pull-right hidden-xs showopacity fa fa-user"></span></a></li> 

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

來源

2016-03-04 None

我爲什麼得到-1？我解釋了一切 – None

您可以通過display: flex; css屬性來解決此問題。用新的div類包裝導航和內容（.new-class - 與下面的css示例相同），並致電display:flex.請參閱下面的代碼。

CSS

.new-class{ 
    display:flex; 
}

請參閱更新jsfiddle。

來源

2016-03-04 10:13:08

這就是它...... tnx :) – None

如果左側爲200px，如何設置寬度爲100％的正確內容？

回答

相關問題