logo标签列表

如何使Bootstrap的导航栏水平显示

htmlcsstwitter-bootstraptwitter-bootstrap-3
4

我正在按照http://getbootstrap.com/components/#navbar-default的示例使用导航栏，但是我遇到了问题，无法像示例中那样水平显示。下面的代码与页面上的代码相同。我需要做什么才能使其水平显示？

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap@3.3.5" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body id="bs-example-navbar-collapse-1">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <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="#">Brand</a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
          </li>
          <li><a href="#">Link</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><a href="#">Separated link</a>
              </li>
              <li role="separator" class="divider"></li>
              <li><a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
        </ul>
        <form class="navbar-form navbar-left">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#">Link</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><a href="#">Separated link</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</body>

</html>

1
你的导航栏看起来完全符合要求。它具有响应式设计，在移动端时会自动堆叠，所以我这里没有发现任何问题。 - gianni
1
这个回答解决了你的问题吗？如何将Bootstrap导航栏的下拉菜单项水平显示而不是垂直显示？（https://stackoverflow.com/questions/58602122/how-to-display-dropdown-menu-items-of-bootstrap-navbar-in-a-horizontal-manner-ra） - TylerH
还有一个重复列表 https://dev59.com/IWMl5IYBdhLWcg3wMUeP - TylerH
以上另外两个问题并不是同一个问题的重复。我使用了Bootstrap文档中的HTML示例，遇到了类似的问题。当它被包含在一个空的HTML页面中时，它会水平显示 - 正如它应该的那样，但是当它被包含在Angular项目中时，最外层的**<ul>**元素的子元素会垂直显示（以列的形式）而不是水平显示（作为一行）。这个问题与下拉项无关，而其他两个问题则特别涉及这样的下拉菜单。 - avat
3个回答
4
尝试使用 ul class="nav nav-pills navbar-right"。
2
我不能百分之百确定“我的”问题与原帖的完全相同，但它看起来非常相似，同样的解决方案可能适用。
在我的情况下，当导航栏在Angular应用程序中使用“开发人员工具”时出现问题。这会将可用于引导的页面宽度减小到某个阈值以下（见下文），从而使导航栏项目显示为列而不是行。
最外层的导航栏定义，如文档示例所示，如下所示：
<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        ...
    </div>
</nav>

在浏览器中检查了各种元素类/样式以及 Bootstrap 文档后，似乎存在以下限制：
-
  • 标签的布局不是直接由父
      控制，而是由主要的
    • 0

    从我阅读您的问题的方式来看，我了解到您正在尝试将其垂直而不是水平。至少从您已经水平的代码示例中可以做出这个假设。:)

    一个具有类名为flex-column的导航列表应该适用于列表本身。在Bootstrap文档下有相关可用样式。这个列表本身的一个例子可能会像这样：

    <ul class="nav flex-column nav-link">
    <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </li>
    <form class="my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
</ul>

    Bootstrap中大多数导航栏的功能似乎都可以与此一起使用。至少在我目前使用的功能方面是如此。

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接