使引导菜单‘浮动’并固定宽度

Question

我正在尝试使用bootstrap，但是有一些关于导航栏的问题。目前它固定在顶部，但我希望在导航和页面顶部之间有一些填充，就像导航是浮动的一样。我还希望导航的宽度与内容相同。你知道这是怎么实现的吗？

谢谢！(下面的代码)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Explore Canterbury</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body>

    <div class="container">

      <!-- Static navbar -->
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div id="navbar">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Locations</a></li>
              <li><a href="#">Photos</a></li>
              <li><a href="#">Info</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>
    </div> <!-- /container -->
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

Answer 1

如果您想在导航栏和页面的to之间留出一些空格，您可以添加一个新类或将样式添加到现有的导航栏类中。大概是这样的：

.navbar {
    margin-top:10px;
}

我们将需要更多的细节，你的意思是使它与内容相同的宽度。现在，您将导航栏包装在一个div中，其中包含一个容器类，导致导航栏不是全宽的。

Answer 2

在看不到实际页面的情况下，您可以添加自己的样式表，然后创建自己的样式来添加填充、边距、宽度等，以便在不调整引导样式表的情况下自定义bootstrap不能做的任何事情。如果你把链接贴到你的页面上，我也许能给你一个更清晰的答案。