Question

我想制作一个带有固定宽度的侧边栏，并使用bootstrap网格到页面的其余部分。以下代码（JSBin）不起作用：我们看到引导网格应用于整个页面。

有谁知道它是否可以实现？

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
      .fixed {
        width: 202px;
      }
      .sidebar {
        display: none;
      }
      @media (min-width: 768px) {
        .sidebar {
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          z-index: 1000;
          display: block;
          background-color: #f5f5f5;
        }
      }
    </style>
  </head>
  <body>
    <div class="fixed sidebar">
      <ul class="nav">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
      </ul>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-sm-6 col-md-6">
          abcsfdsqdfdqfdqsdfdqfdsqdfssd
        </div>
        <div class="col-sm-6 col-md-6">
          efg
        </div>
      </div>
    </div>
  </body>
</html>

Answer 1

固定和绝对定位的元素不再是文档流的一部分，因此它们不会保留它们通常会占用的空间。在您的示例中，这意味着侧边栏不会推送其余内容，这就是您看到它与主要内容重叠的原因。

我发现通常使用的是流体容器（因此页面内容跨越整个视口），然后将填充添加到＆＃34; main＆＃34;用于清除边栏否则会重叠的水平空间的部分。

这是一个基于我最近建立的项目的例子：

CSS

/* Hide for mobile, show later */
.sidebar
{
    display: none;
}

@media (min-width: 768px)
{
    .sidebar
    {
        position: fixed;
        top: 55px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        display: block;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
        width: 175px;
    }

        .sidebar.student
        {
            background-color: #71B1D1;
            color: #fff;
            border-right: 1px solid #eee;
        }
}

/*
 * Main content
 */

.main
{
    padding: 20px;
}

@media (min-width: 768px)
{
    .main
    {
        padding-left: 215px;
        padding-right: 40px;
    }
}

标记

<div class="container-fluid">

    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
      </ul>
    </div>

    <div class="main">

        <h2>Content Header</h2>

        <p>Some content here...</p>

        <hr />
        <footer>
            <p>
                &copy; 2017
            </p>
        </footer>
    </div>
</div>

演示：https://jsbin.com/giwozanavi

代码：https://jsbin.com/giwozanavi/edit?html,css,output

Answer 2

试试这个：

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <style>
        .fixed {
            width: 202px;
        }

        .sidebar {
            display: none;
        }        
        @media only screen and (min-width: 481px) and (max-width: 1124px) {
            .fixed {
                width: 140px;
            }
        }
        @media (min-width: 768px) {
                .sidebar {
                    position: fixed;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    z-index: 1000;
                    display: block;
                    background-color: #f5f5f5;
                }
            }
    </style>
</head>
<body>
    <div class="row">
        <div class="col-sm-2">
            <div class="fixed sidebar">
                <ul class="nav">
                    <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">Reports</a></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-10">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6 col-md-6">
                        abcsfdsqdfdqfdqsdfdqfdsqdfssd
                    </div>
                    <div class="col-sm-6 col-md-6">
                        efg
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

将引导网格应用于页面的一部分

2 个答案:

CSS

标记