Question

我已经浏览了其他帖子，似乎无法找到答案。

我正在尝试使用Bootstrap创建一个网页。我想要一个固定在左边的垂直nabvar占用3列，右边的内容占用9列。我已经实现了scrollspy来滚动时更新导航栏。

它完美无缺，直到缩小屏幕。我的理解是它应该把列放在彼此之上。如果我从列中删除了affix属性，它会正确更新，但导航栏没有修复，所以scrollspy是没有意义的。

这是我的代码：

＆＃13;

ul.nav-pills {
  padding-top: 20px;
  top: 20px;
}

.item {
  padding-top: 70px;
}

#content {
  margin-bottom: 600px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Meet Sarah</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/sarah.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">

  <div class="container-fluid">
    <div id="content" class="row">
      <nav class="col-sm-3" id="myScrollspy">
        <ul class="nav  nav-pills nav-stacked  " data-spy="affix">
          <li class="active snav-item">
            <a class="nav-link" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about_me">About Me</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#school">Colorado School of Mines</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#alpine">Alpine Ski Racing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#music">Music</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#outreach">Outreach</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#extra">Extracurriculars</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#likes">Obsessions</a>
          </li>
        </ul>
      </nav>

      <div class="col-sm-9">
        <div id="about_me" class="container-fluid item">
          <h1>About Me</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>

        <div id="school" class="container-fluid item">
          <h1>Colorado School of Mines</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>

        <div id="alpine" class="container-fluid item">
          <h1>Alpine Ski Racing</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>

        <div id="music" class="container-fluid item">
          <h1>Music</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>

        <div id="outreach" class="container-fluid item">
          <h1>Outreach</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>

        <div id="extra" class="container-fluid item">
          <h1>Extracurriculars</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>

        <div id="likes" class="container-fluid item">
          <h1>Obsessions</h1>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
          <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
        </div>


      </div>
    </div>
  </div>

</body>

</html>

＆＃13;

有关如何修复左侧导航栏而不在较小屏幕中重叠的任何建议吗？

Answer 1

尝试更改＆＃34; col-sm-9＆＃34;到＆＃34; col-md-9＆＃34;或＆＃34; col-lg-9＆＃34;。无论哪个效果更好。或者使用＆＃34; col-9＆＃34;。

  ...
  <div class="col-9">
    <div id="about_me" class="container-fluid item">
      <h1>About Me</h1>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
      <p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
    </div>
    ...

当窗口收缩时，Bootstrap列重叠

1 个答案: