Question

我正在使用Bootstrap，并且页面内容可能比浏览器屏幕宽得多。当我更改窗口的大小时，Bootstrap导航栏的大小将重新调整，但是如果我向右滚动，则它的左侧将保持固定宽度：0。

我正在寻找一种方法，使滚动条超出初始窗口大小时，导航栏保持可见。

这是一个有问题的代码示例：

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->



<!-- TODO IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- <link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"> -->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>

  <nav class="navbar navbar-expand-md navbar-dark bg-primary bg-custom fixed-top-zzzz" style="z-index: 10000; padding: 0 5px;">
<a class="navbar-brand" href="/">Brand</a>

<ul class="navbar-nav pull-right">
  <li class="nav-item">
    <a href="/" class="nav-link">link</a>
  </li>
</ul>
</nav>

<div style="width:4000px">
Wide div breaks bav
</div>
</body>

Answer 1

好了，所以这基本上是通过引导V4而不是V3，我也做了一些额外的变化，即：

删除了pull-right类，并添加了ml-auto
更改类fixed-top-zzzz，只是fixed-top
添加margin-top: 50px到容器div来能够看到后面的Navbar

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand navbar-dark bg-primary bg-custom fixed-top" style="z-index: 10000; padding: 0 5px;">
  <a class="navbar-brand" href="/">Brand</a>

  <ul class="navbar-nav ml-auto">
    <li class="nav-item">
      <a href="/" class="nav-link">link1</a>
    </li>
    <li class="nav-item">
      <a href="/" class="nav-link">link2</a>
    </li>
    <li class="nav-item">
      <a href="/" class="nav-link">link3</a>
    </li>
  </ul>
</nav>

<div style="width:4000px; margin-top: 50px">
  Wide div breaks bav 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 2

根据您在上一个答案中的评论，.navbar-fixed-top类似乎可以帮助您在水平（或垂直）滚动时保持固定的导航。

https://www.bootply.com/a2nMrbqqzv

当内容较宽时，如何将引导导航栏固定到视口？

2 个答案: