个人中心
gpt4 book ai didi

html - Bootstrap 中的垂直导航

转载 作者：行者123 更新时间：2023-11-28 07:14:35 26 4
gpt4 key购买 nike

我想在 Bootstrap 3 中创建一个垂直侧边栏。侧边栏用于导航，应该延伸到页面末尾。页面布局应类似于 this。

我已经接近嵌套列了，但唯一的问题是侧边栏的最大宽度必须为 200 像素。但是，如果我通过 CSS 执行此操作，则在最后一列和浏览器的右边缘之间会有一些不需要的填充。

我希望我的代码笔可以帮助阐明我正在尝试做的事情: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>

你们中有人知道如何解决这个问题吗？ :)

非常感谢!

最佳答案

也许这会有所帮助:

在 200px 处为 sidebar 创建一个 div，并为页面添加与它对应的 div(示例中的 main-content)类似数量的 margin-left坐的内容。

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>

关于html - Bootstrap 中的垂直导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32428441/

26 4 0
文章推荐： javascript - 在同一个对象中使用对象的方法
文章推荐： html - 图像适合 div 大小并可点击
文章推荐： html - 有没有办法找到 Phonegap 渲染的字体？
文章推荐： javascript - zeroclipboard 工作一半的时间
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com