Bootstrap4 相邻的导航栏列[关闭]

Question

关闭。 这个问题需要调试细节。 它目前不接受答案。

---

想改善这个问题吗？ 更新问题，使其成为 Stack Overflow的主题。

去年关闭。

改进这个问题

这是我的代码：

<nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" id="navbar">
      <div class="container">
          <a class="navbar-brand mynav" href="{% url 'home' %}">Star Social</a>
              <ul class="navbar-nav navbar-right">
                  {% if user.is_authenticated %}

                      <li><a href="">Posts</a></li>
                      <li><a href="">Groups</a></li>
                      <li><a href="">Create Group</a></li>
                      <li><a href="{% url 'accounts:logout' %}">Logout</a></li>

                  {% else %}
                    <li><a href="">Group</a></li>
                    <li><a href="{% url 'accounts:login' %}">Login</a></li>
                    <li><a href="{% url 'accounts:signup' %}">Signup</a></li>
                  {% endif %}
              </ul>
      </div>
  </nav>

我有一个这样的代码，但是当我运行服务器时，我得到了这样的风格。

Answer 1

在您的引导代码标签中，您忘记在<li>和<a>添加类，您必须将 ul 标签navbar-right的类替换为ml-auto此处我将更改

 <nav class="navbar navbar-expand-lg navbar-light bg-light" role="navigation" id="navbar">

          <a class="navbar-brand" href="{% url 'home' %}">Star Social</a>

              <ul class="navbar-nav ml-auto">
                 <!-- {% if user.is_authenticated %} -->
                      <li class="nav-item active"><a class="nav-link" href="">Posts</a></li>
                      <li class="nav-item"><a class="nav-link" href="">Group</a></li>
                      <li class="nav-item"><a class="nav-link" href="">Create Group</a></li>
                      <li class="nav-item active"><a class="nav-link" href="{% url 'accounts:logout' %}">Logout</a></li>

               <!--   {% else %} -->

                      <li class="nav-item"><a class="nav-link" href="">Group</a></li>
                      <li class="nav-item"><a class="nav-link" href="{% url 'accounts:login' %}">Login</a></li>
                      <li class="nav-item"><a class="nav-link" href="{% url 'accounts:signup' %}">Signup</a></li>
       <!--           {% endif %} -->
              </ul>
    </nav>

以上尝试但它不会崩溃如果你想做同样的请在此处参考引导程序的文档我给链接引导程序导航栏它工作正确所以让我知道