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类。像这样：

.navbar {
    margin-top:10px;
}

我们需要更多详细信息，使其与内容的宽度相同。现在你的导航栏包含在一个带有容器类的div中，导致它不是整个宽度。

Answer 2

在没有看到实际页面的情况下，您可以添加自己的样式表，然后创建自己的样式以添加填充，边距，宽度等，以自定义引导程序在没有调整引导程序样式表的情况下执行的任何操作。如果您将链接发布到您的页面，我可能会给您一个更清晰的答案。

使引导菜单“浮动”并固定宽度

2 个答案: