Question

我希望导航栏右侧的导航链接对齐。但是我的导航链接显示在左侧的徽标旁边。有任何想法吗？

这是我的代码：

<nav class="navbar navbar-expand-md navbar-light fixed-top bg-light white-bg purple-top-strip">
    <div class="container">
      <a class="navbar-brand" href="#"><img src="images/presitskillsbank-logo.png" width="102" height="40" alt=""/></a>
      <button class="navbar-toggler" 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>
      <div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
        <ul class="nav navbar-nav navbar-right">
          <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>
    </div>
    </nav>

Answer 1

你在HTML结构化方面犯了一些错误，这在bootstrap 3中有效，但在bootstrap 4中则没有。

以下是在bootstrap 4中使用的代码示例：

<nav class="navbar navbar-light navbar-expand-md bg-faded justify-content-center">
    <a href="/" class="navbar-brand d-flex w-50 mr-auto">Brand</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar3">
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Right</a>
            </li>
        </ul>
    </div>
</nav>

这是带有示例http://jsbin.com/pagigugelo/edit?output

的JSBin

Answer 2

以下是您的快速参考的工作代码。

更新了小提琴：https://jsfiddle.net/DTcHh/39316/

＆＃13;

.navbar-toggler {
  float: right;
  margin-top: 10px;;
  position: relative;
  z-index: 3;
}
.navbar-right {
  float: right;
}
.navbar-nav {
  margin-top: 20px;
}
.navbar-nav li {
  width: 100%;
}

＆＃13;

Bootstrap navbar-right无法在fix-top上运行

2 个答案: