Bootstrap中的垂直導航

我想在Bootstrap 3中創建一個垂直側邊欄。側邊欄用於導航，應該延伸到te頁的末尾。頁面佈局應該看起來像this Bootstrap中的垂直導航

通過嵌套列我越來越近了，但唯一的問題是側邊欄必須具有200px的最大寬度。如果我通過CSS來做到這一點，那麼最後一列和瀏覽器右邊緣之間會有一些不需要的填充。

我希望我的codepen可以幫助澄清什麼，我試圖做的：http://codepen.io/ThibaultG4U/pen/vNEQLY

.container { 
 
    width: 100%; 
 
    background-color: #ccc; 
 
} 
 

 
#mainNav { 
 
    background-color: red; 
 
} 
 

 
#sideNav { 
 
    background-color: green; 
 
    max-width: 200px; 
 
} 
 

 

 
#col1 { 
 
    background-color: yellow; 
 
} 
 

 
#col2 { 
 
    background-color: blue; 
 
}

<body> 
 
<nav id="mainNav"> 
 
    <p>Main Nav</p> 
 
</nav> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
     <nav id="sideNav" class="col-lg-3"> 
 
      <p>Side Nav</p> 
 
     </nav> 
 

 
     <div class="col-lg-9"> 
 
      <div id="col1" class="col-lg-6"> 
 
       <p>Col 1</p> 
 
      </div> 
 

 
      <div id="col2" class="col-lg-6"> 
 
       <p>col 2</p> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
</body>

，你有沒有人有一個想法如何解決這一問題？ :)

非常感謝提前！

來源

2015-09-06 ThibaultG4U

也許這將幫助：

在爲200px創建爲sidebar一個div，並以相似的量增加利潤率左反對它一個div（main-content中的例子）的頁面內容坐下。

body, 
 
html { 
 
    height: 100%; 
 
} 
 
body { 
 
    padding-top: 60px; 
 
} 
 
.navbar.navbar-default { 
 
    background: #eee; 
 
    border-bottom: none; 
 
} 
 
.sidebar-fixed { 
 
    margin-top: 50px; 
 
    padding: 5px 18px; 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background: #eee; 
 
} 
 
ul.sidebar-list { 
 
    list-style: none; 
 
    display: inline; 
 
    text-align: left; 
 
} 
 
ul.sidebar-list > li { 
 
    font-size: 18px; 
 
    padding-bottom: 25px; 
 
} 
 
ul.sidebar-list > li > a { 
 
    color: #3e474f; 
 
    text-decoration: none; 
 
} 
 
.navbar-default .collapse .navbar-nav > li > a, 
 
.navbar-default .navbar-header a.navbar-brand { 
 
    color: #3e474f; 
 
} 
 
.navbar-default .navbar-toggle, 
 
.navbar-default .navbar-toggle:hover, 
 
.navbar-default .navbar-toggle:focus { 
 
    border: none; 
 
    background: none; 
 
} 
 
.navbar-default .navbar-toggle .icon-bar { 
 
    background: #3e474f; 
 
} 
 
.main-content { 
 
    margin-left: 200px; 
 
} 
 
@media (max-width: 768px) { 
 
    .sidebar-fixed { 
 
    display: none; 
 
    } 
 
    .main-content { 
 
    margin: 20px 0px 0px 0px; 
 
    padding: 10px; 
 
    min-width: 100%; 
 
    } 
 
    .navbar-default .collapse .navbar-nav > li > a { 
 
    color: #3e474f; 
 
    } 
 
}

<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 navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar" aria-expanded="false"> <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="#">Brand</a> 
 

 
    </div> 
 
    <div class="collapse navbar-collapse" id="bs-navbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"> Register</a> 
 

 
     </li> 
 
     <li><a href="#"> Login</a> 
 

 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
<div class="container-fluid"> 
 
    <div class="sidebar-fixed"> 
 
    <ul class="sidebar-list"> 
 
     <li> <a href="#"> About</a> 
 

 
     </li> 
 
     <li> <a href="#"> Contact</a> 
 

 
     </li> 
 
     <li> <a href="#"> Products</a> 
 

 
     </li> 
 
     <li> <a href="#"> Blog</a> 
 

 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="main-content"> 
 
    <div class="container-fluid"> 
 
     <div class="well">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux 
 
     de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce 
 
     à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition 
 
     et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a 
 
     pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, 
 
     et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem I</div> 
 
    </div> 
 
    </div> 
 
</div>

來源

2015-09-06 21:41:28 vanburen

那是因爲你使用一個內部類。您需要使用較大的父塊.col-lg-6。作爲最小的需要.col-lg-12：

<div class="col-lg-12"> 
    <div id="col1" class="col-lg-6"> 
     <p>Col 1</p> 
    </div> 
    <div id="col2" class="col-lg-6"> 
     <p>col 2</p> 
    </div> 
</div>

要長相完美，你需要使用.col-lg-10有兩個.col-lg-5：

<div class="col-lg-10"> 
    <div id="col1" class="col-lg-5"> 
     <p>Col 1</p> 
    </div> 
    <div id="col2" class="col-lg-5"> 
     <p>col 2</p> 
    </div> 
</div>

，並應將此CSS：

#col1 { 
    background-color: yellow; 
    float: left; 
} 



@media (min-width: 1200px) .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 { 
    float: right; 
} 

@media (min-width: 1200px) 
.col-lg-3 { 
    width: 25%; 
    float: left; 
}

來源

2015-09-06 21:44:39 AleshaOleg

Bootstrap中的垂直導航

回答

相關問題