Question

我不擅长造型网站，并且在css和响应式设计方面遇到麻烦。因此，根据同事的建议，我决定尝试使用Bootstrap工具包，到目前为止，我对此非常满意。但是，我无法理解有关该工具包的导航栏组件的一些内容，并且到目前为止还没有成功定制这部分模板。

我的一个混乱源于普遍包含一个用于折叠导航栏的可切换按钮。看起来无论它们显示导航栏的示例如何，它们都包括折叠类和切换按钮，即使该按钮似乎没有显示在任何地方并且导航栏没有折叠。例如，请查看以下链接：http://getbootstrap.com/examples/navbar-fixed-top/

如果您在此处查看来源，则会看到按钮和折叠类，但导航栏缺少所述按钮且未折叠。当我查看CSS时，我确实看到它已指定display: none;，但为什么要包含它呢？

<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="../navbar/">Default</a></li>
        <li><a href="../navbar-static-top/">Static top</a></li>
        <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

最后，我认为这个问题与我遇到的第二个问题是相互关联的，也就是说，我正在努力证明我的自定义导航栏与navbar-right类的链接是正确的，但是当我这样做时所以，链接不会向右移动。这是否与删除切换按钮和折叠类有关？这是我的悲惨失败的尝试。我使用基本jumbotron模板，并包括jumbotron和min bootstrap css文件。我相信，jumbotron css文件非常小，只包括一些边缘和颜色的身体样式。我无法看到阻止导航链接显示在哪一侧的位置。

相反，图像显示在左侧，链接显示在它下面，没有任何样式，只是一个卡在一起的链接列表。下拉列表不起作用，因为我正在通过指定uib-dropdown来试验角度站点上使用的不同方法，所以我应该提一下 - 当我指定了引导类和属性时，下拉部分正在工作。

当我尝试将链接显示在右侧时，我发现了一个jsfiddle示例：https://jsfiddle.net/1jehsp5r/

事实上，我还没有在导航栏中找到一个正确对齐的工作示例。我现在已经重新完成了这个代码大约10次而没有一个类和div的单一组合有一个简单的固定顶部导航栏，左边有一个元素，右边有一组链接。以本教程为例：https://www.tutorialspoint.com/bootstrap/bootstrap_navbar.htm - 它们有截图，但是当你点击＆＃34;试试它＆＃34;按钮，它加载到一个交互式屏幕，他们自己的例子甚至无法正常工作。一切都在左边对齐，这正是我所经历的。

任何人都可以向我展示一个简单的方法，只需制作一个类似于此处的简单导航栏：https://angularjs.org/

Answer 1

对于折叠按钮，对于大多数情况，它设置为小屏幕。它是响应性（或所有屏幕尺寸的显示艺术）。

以下是折叠按钮的示例：Bootstrap navbar external-content

要对齐行右侧的项目，您可以使用ml-auto元素上的<ul>（margin-left：auto;）类。

这是an example of a bootstrap navbar with links align on the right side。

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

希望它有所帮助。

编辑：

这些示例是为Bootstrap 4 alpha 6构建的。

引导导航栏的问题

1 个答案: