首页 文章

Bootstrap 4导航栏切换器，带有单独的导航栏链接

提问于
浏览 次
2

我一直在制作一个需要在所有设备上都可以看到导航栏切换器的固定导航栏（我删除了navbar-toggleable-md类来实现这一点） . 它需要在左侧，在它之前使用navbar-brand，而另一组链接（在toggler之外）需要在右侧 .

像这样：

enter image description here

问题是，无论我做什么，这些正确的链接拒绝保持内联，我的导航栏分为两行 .

这是我一直在使用的代码的基本概要 . 我究竟做错了什么？

<nav class="navbar navbar-inverse fixed-top bg-inverse">
      <button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-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" href="#">Link</a>
          </li>
        </ul>
      </div>
  <div class="float-right">
    <a>Link</a>
  </div>
</nav>

有人，请帮忙！谢谢！

css twitter-bootstrap bootstrap-4

1 回答

  • 1

    将导航栏更改为 flex-row . 默认情况下，'s direction: column which will make the navbar elements stack vertically in 2 rows like you'重新看到 .

    另外，在Brand之后添加额外的链接，并使用 ml-auto 将其推向右侧...

    <nav class="navbar navbar-inverse fixed-top bg-inverse flex-row flex-wrap">
    <button class="navbar-toggler navbar-toggler-left ml-5" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
             <a class="nav-link" href="#">Link</a>
        </li>
    </ul>
    <div class="collapse navbar-collapse w-100" id="navbarCollapse">
        <ul class="navbar-nav mr-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" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

    http://www.codeply.com/go/CUCeeElIcI

    回复于

相关问题