Question

我正在使用Bootstrap4。我似乎无法将“注销”按钮向右对齐：

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="{{ if eq .BaseURL "" }}/{{ else }}{{ .BaseURL }}{{ end }}">AppName</a>    
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link{{ if eq .Title "Home" }} active{{ else }}{{ end }}" href="{{ if eq .BaseURL "" }}/{{ else }}{{ .BaseURL }}{{ end }}">Push<span class="sr-only">{{ if eq .Title "Home" }}(current){{ end }}</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link{{ if eq .Title "SomeFunction" }} active{{ else }}{{ end }}" href="{{ .BaseURL }}/somefunction">SomeFunction<span class="sr-only">{{ if eq .Title "Inflight" }}(current){{ end }}</span></a>
        </li>
        <li class="navbar-item pull-right">
          <a class="nav-link{{ if eq .Title "Logout" }} active{{ else }}{{ end }}" href="{{ .BaseURL }}/logout">LogoutX<span class="sr-only"></span>{{ if eq .Title "Logoff" }}(current){{ end }}</span></a>
        </li>
      </ul>
    </div>
</nav>

谢谢！

Answer 1

您可以将mr-auto用于ul，并将logout选项添加为兄弟姐妹

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="{{ if eq .BaseURL "" }}/{{ else }}{{ .BaseURL }}{{ end }}">AppName</a>    
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link{{ if eq .Title "Home" }} active{{ else }}{{ end }}" href="{{ if eq .BaseURL "" }}/{{ else }}{{ .BaseURL }}{{ end }}">Push<span class="sr-only">{{ if eq .Title "Home" }}(current){{ end }}</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link{{ if eq .Title "SomeFunction" }} active{{ else }}{{ end }}" href="{{ .BaseURL }}/somefunction">SomeFunction<span class="sr-only">{{ if eq .Title "Inflight" }}(current){{ end }}</span></a>
      </li>
    </ul>
    <li class="navbar-item">
        <a class="nav-link{{ if eq .Title "Logout" }} active{{ else }}{{ end }}" href="{{ .BaseURL }}/logout">LogoutX<span class="sr-only"></span>{{ if eq .Title "Logoff" }}(current){{ end }}</span></a>
    </li>
  </div>
</nav>

HTML版本

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<nav class="navbar navbar-expand-sm navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">AppName</a>    
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Push<span class="sr-only">Home</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">SomeFunction<span class="sr-only">Inflight</span></a>
      </li>
    </ul>
    <li class="navbar-nav navbar-item">
      <a class="nav-link" href="#">LogoutX<span class="sr-only">Logoff</span></a>
    </li>			
  </div>
</nav>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Bootstrap 4，无法将按钮向右对齐

1 个答案: