导航栏上的引导程序“词缀”打破了右边距答案

【问题标题】：bootstrap 'affix' on navbar breaks the right margin导航栏上的引导程序“词缀”打破了右边距
【发布时间】：2017-02-04 21:18:45
【问题描述】：

大家好，我正在通过制作个人网页来学习引导程序。我用词缀选项创建了一个导航栏，但是当向下滚动时，右边距似乎坏了。你能帮我弄清楚为什么吗？在此先感谢，这是代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <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.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    .affix {
      top: 0;
      width: 100%;
    }
    .affix + .container-fluid {
      padding-top: 70px;
    }
  </style>
</head>

<body>
  <div class="container-fluid">
    <div class="alert alert-warning alert-dismissable fade in">
      <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
      <strong>Warning!</strong> This site uses cookies
    </div>
    <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Something</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Pag 1</a>
            </li>
            <li><a href="#">Pag 2</a>
            </li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li>
              <a href="#"> <span class="glyphicon glyphicon-log-in"> </span>
              </a>
            </li>
          </ul>

        </div>
      </div>
  </div>
  <div class="container-fluid" style="height:1000px">
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
  </div>
</body>

</html>

编辑：使用 chrome 检查器我发现了一个警告。它说：“密钥“宽度：设备宽度”无法识别和忽略。”

【问题讨论】：

标签： css html navbar affix

【解决方案1】：

您缺少一些结束标签。希望下面的sn-p能帮到你。

<!DOCTYPE html>
<html lang="en">
  
    <head>
        <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.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>

    <body>
        <nav class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="197">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">Something</a>
                </div>
                <div class="collapse navbar-collapse" id="myNavbar">
                    <ul class="nav navbar-nav">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Pag 1</a></li>
                        <li><a href="#">Pag 2</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="#"><span class="glyphicon glyphicon-log-in"/></a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
            <h1>Some text to enable scrolling</h1>
        </div>
    </body>
</html>

【讨论】：

感谢您的快速回复！这对我有用，但我正在尝试找到一种方法来省略导航栏声明中的“navbar-fixed-top”类，因为我不太喜欢它的外观。
我还注意到，使用 navbar-fixed-top 导航覆盖了我的示例文本，所以这不是我正在搜索的解决方案。