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中的垂直导航

回答

相关问题