無法將儀表板裝入TB模板上的容器

Question

我正嘗試使用Twitter Bootstrap構建模板。 Here就是一個實例。我遇到的問題是我可以定位dashboard div旁邊的sidebar菜單，我不知道我的錯誤在哪裏？我能得到專家的幫助嗎？這是HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3 col-md-2 sidebar"> 
      Menu 
     </div> 
     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> 
      dashboard 
     </div> 
    </div> 
</div> 

這是風格：

.sidebar { 
    display: none; 
} 
@media (min-width: 768px) { 
    .sidebar { 
     z-index: 1000; 
     display: block; 
     overflow-x: hidden; 
     overflow-y: auto; 
     background-color: #f5f5f5; 
     border-right: 1px solid #eee; 
    } 
} 

.nav-sidebar { 
    margin-right: -21px; 
    margin-bottom: 20px; 
    margin-left: -20px; 
} 
.nav-sidebar > li > a { 
    padding-right: 20px; 
    padding-left: 20px; 
} 
.nav-sidebar > .active > a, 
.nav-sidebar > .active > a:hover, 
.nav-sidebar > .active > a:focus { 
    color: #fff; 
    background-color: #428bca; 
} 

.main { 
    padding: 20px; 
} 
@media (min-width: 768px) { 
    .main { 
     padding-right: 40px; 
     padding-left: 40px; 
    } 
} 
.main .page-header { 
    margin-top: 0; 
} 

Answer 1

基本上你被抵消列以超越實際的網格，引導報價（正常電網只有12列，但你最多可擴展到15個偏移量）。基本上，只是要提防超出正常的列邊界，並且不要使用四周填充，而是移動一列而不是另一列。

採取下列出你的代碼，使其重新調整：

CSS：

.main { 
    /* padding: 20px; */ 
} 

然後重新安排你的HTML以下：

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3 col-md-2 sidebar"> 
      Menu 
     </div> 
     <div class="col-sm-9 col-md-10 main"> 
      dashboard 
     </div> 
    </div> 
</div> 

DEMO JSFiddle

參考文獻：

我敢肯定，你以前見過這一點，但它絕不會傷害再忽視它。 Bootstrap提供了一個如何使用他們的網格系統here的絕佳例子。