如何将Bootstrap固定导航栏对齐到1000px自定义容器内？

我懂你的困扰——想要让固定的Bootstrap导航栏和自定义的1000px宽度容器对齐，但默认的navbar-fixed-top总是占满整个页面宽度，哪怕把它放进容器里也没用。这是因为fixed定位的元素会脱离文档流，是相对于浏览器视口定位的，父容器的宽度限制不到它。下面给你具体的解决办法：

步骤1：调整导航栏结构与样式 #

首先把导航栏从你的#container里移出来（fixed元素不需要嵌套在文档流容器里），然后自定义导航栏的宽度和居中规则，覆盖Bootstrap的默认样式：

修改后的CSS代码 #

html,body{
    font-family: Arial, sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background: #fff;
    height: 100%;
    margin:0;
}
#container {
    width: 1000px;
    display: table;
    min-height: 100%;
    margin: auto;
    height:100%;
    background:#f5f5f5;
}
/* 自定义固定导航栏样式，让它和容器对齐 */
.navbar-fixed-top {
    width: 1000px;
    margin: 0 auto;
    left: 0;
    right: 0;
    border-radius: 0; /* 可选：去掉圆角让导航栏和容器视觉上更贴合 */
}

修改后的HTML结构 #

把导航栏移出#container，同时修正你拼写错误的conatiner1类（这个类是多余的，直接删掉即可）：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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>
    <!-- 上面的自定义CSS放在这里 -->
</head>
<body style="height:1500px">
<!-- 导航栏移到容器外面，单独放置 -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#">Page 3</a></li>
        </ul>
    </div>
</nav>

<div id="container">
    <div class="container" style="margin-top:70px"> <!-- 调整margin-top，避免内容被导航栏遮挡 -->
        <h3>Fixed Navbar</h3>
        <div class="row">
            <div class="col-md-4">
                <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
            </div>
            <div class="col-md-4">
                <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
            </div>
            <div class="col-md-4">
                <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
            </div>
        </div>
    </div>
    <h1>Scroll this page to see the effect</h1>
</div>
</body>
</html>

步骤2：原理说明 #

• Bootstrap默认的navbar-fixed-top样式是position:fixed; width:100%; left:0; right:0;，所以会占满整个视口宽度。我们通过设置width:1000px; margin:0 auto; left:0; right:0;，让它保持固定在顶部的同时，宽度和自定义容器一致，并且水平居中。
• 把导航栏移出#container是因为fixed定位元素不在文档流中，父容器的样式无法影响它的位置和宽度。
• 把内容容器的margin-top调整为70px（比原来的50px大），是为了避免自定义宽度的导航栏遮挡下方内容。

这样修改后，你的固定导航栏就会和1000px的自定义容器完美对齐，同时保持固定在顶部的滚动效果。

内容的提问来源于stack exchange，提问作者Developer