我在我的佈局中有一個左側菜單，我的網格行在左側菜單後延伸

我的佈局有一個左側菜單，然後我的頭部有菜單，然後是我的主要內容區域。我在我的佈局中有一個左側菜單，我的網格行在左側菜單後延伸

發生了什麼事情是，如果我在主內容區域添加另一個網格行，它將被推到摺疊下方，直到在左側菜單下。

我在網格佈局中犯了一個根本性的錯誤，還是有一個簡單的解決方法？

<div class="container-fluid"> 
    <div class="menu-container"> 
     <ul class="menu" id="sidemenu"> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
     <li><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
    </ul> 
    </div> 

    <div class="content-container"> 
    <div class="header"> 
     <div class="row"> 
     <div class="col-sm-6"> 
      left header 
     </div> 
     <div class="col-sm-6 text-right"> 
      right header 
     </div> 
     </div> 
    </div> 
    <div class="page-content"> 
     <div class="row"> 
     <div class="col-sm-12"> 
      this is a row #1 
     </div> 
     </div> 
     <div class="row"> 
     <div class="col-sm-12"> 
      this is a row #2 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

https://jsfiddle.net/4oak4p0o/14/

來源

2017-04-14 Blankman

將overflow: auto加到.content-container .page-content。 .row類清除浮動，所以這是清除浮動的左側菜單。 https://jsfiddle.net/4oak4p0o/15/

來源

2017-04-14 20:09:29

你能解釋爲什麼這個工程？它與顯示不同：inline-block？ – Blankman

'inline-block'與'overflow：auto'不一樣。兩種根本不同的行爲。 bootstrap添加'display：table;內容：「」;'爲'.row'的僞元素，所以第一個工作，但是這將清除您的導航菜單上的浮動下一行。 'overflow：auto'會將'.row'類包含到'.page-content'中，而不是在外部溢出，並向下推動下一行以清除浮動的左側菜單。 –

這樣的事情？我加display: inline-block;到。內容容器。第內容

在這裏閱讀更多：CSS display: inline vs inline-block

你想要什麼效果，你可以取消的CSS樣式，並添加背景顏色來檢查容器/塊

* { 
    border: 1px solid red; 
}

.menu-container { 
 
    width: 120px; 
 
    float: left; 
 
    display: block; 
 
    padding: 15px; 
 
    padding-bottom: 0px; 
 
    margin-bottom: 0px; 
 
} 
 

 
.content-container { 
 
    width: 100%; 
 
    padding-left: 120px; 
 
} 
 

 
.content-container .header { 
 
    padding: 15px 20px; 
 
    height: 60px; 
 
} 
 

 
.content-container .page-content { 
 
    padding: 50px; 
 
/* background: green; */ 
 
    display: inline-block; 
 
} 
 

 

 
/* * { 
 
\t border: 1px solid red; 
 
} */

<div class="container-fluid"> 
 
    <div class="menu-container"> 
 
    <ul class="menu" id="sidemenu"> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
     <li><a><i class="fa fa-calendar-plus-o"></i><br />Dashboard</a></li> 
 
    </ul> 
 
    </div> 
 

 
    <div class="content-container"> 
 
    <div class="header"> 
 
     <div class="row"> 
 
     <div class="col-sm-6"> 
 
      left header 
 
     </div> 
 
     <div class="col-sm-6 text-right"> 
 
      right header 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="page-content"> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      this is a row #1 
 
     </div> 
 
     </div> 
 
     <div class="row"> 
 
     <div class="col-sm-12"> 
 
      this is a row #2 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-14 20:06:42

我在我的佈局中有一個左側菜單，我的網格行在左側菜單後延伸

回答

相關問題