两个项目彼此不对齐

Question

我正在尝试让我的页面具有响应性，但是当我检查并查看移动视图时，它们确实在桌面上的每个视图旁边对齐，这很好，但在移动视图上看起来像

我希望购物卡通和按钮彼此相邻，因此我的导航栏不会拉伸 她是我的密码

    <!-- navbar -->
<!-- Image and text -->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #025;">
  <div class="container-fluid">
    <a class="navbar-brand text-white" href="{% url 'accounts:home' %}" style="font-size: 25px; font-weight:600;">
      <img src="{% static 'image/logo/logo.png' %}" class="d-inline-block align-text-center logo-img"
        style="margin-left: 150px; height: 40px;">
      BuyBuy
    </a>

    <div class="navbar-nav dekstop_search">
      <form class="form-inline" action="{% url 'products:search' %}">
        {% csrf_token %}
        <input class="search" type="search" placeholder="Search..." aria-label="Search" name="search" required>
        <button class="btn sea btn-outline-primary" type="submit" value="Search"><i class="fas fa-search text-white"></i></button>
      </form>
    </div>

<!-- Links -->
{% if user.is_authenticated %}

  <!-- Right -->
  <div class="navbar-nav">
    <a href="#" class="nav-link text-white text-center"><i class="fas fa-heart"></i>
      <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a href="#" class="nav-link text-white text-center"><i class="fas fa-bell"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{wish|length}}</a>
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <div class="dropdown">
      <img class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="height:50px; border-radius: 50%; margin-right:150px;"
        src="{{ user.profile.profile_pic.url }}">
      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <li class="item text-center" style="font-weight: bolder;"> Hi <strong
            style="color: #B9C04C; cursor:default;"> {{ user.username }} ???? </strong></li>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item text-center" href="{% url 'accounts:profile'  request.user.username %}">My Account</a>
        <a class="dropdown-item text-center" href="{% url 'orders:myorders' %}">My Order</a>
        <a class="dropdown-item text-center" href="#">My Address</a>
        <a class="dropdown-item text-center" href="#">My Cart</a>
        <a class="dropdown-item text-center" href="{% url 'accounts:logout' %}">Log Out</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item text-center" href="#">Settings</a>
        <a class="dropdown-item text-center" href="#">Help</a>
        <a class="dropdown-item text-center" href="#">Privacy Policy</a>
      </div>
      </div>
  </div>
    {% else %}
      <div class="navbar-nav">
      <a class="nav-link text-white" href="{% url 'orders:cart' %}"><i class="fas fa-shopping-cart"></i>
        <span class="badge" style="background-color: white; color:#025; padding:3px;">{{request.session.cart.keys|length}}</span></a>
      <a class="nav-link" href="{% url 'accounts:login' %}"><button type="button" class="btn btn-outline-primary text-white">Log In</button></a>
      </div>
    {% endif %}
  </div>
</nav>

任何帮助将不胜感激，我尝试显示内联块，但没有任何效果。

Answer 1

您可以在父级<div> 上使用display: flex，例如：

<div class="navbar-nav" style="display:flex">

Answer 2

好的，你的问题解决了。太好了。

看起来您正在使用 Bootstrap-5，您的代码有问题，因为您使用了很多内联样式，而不是结束标记，没有使用正确的导航菜单结构。这些与 Bootstrap 冲突。

您应该始终按照 Bootstraps 准则进行编码，否则您的代码将无法按您的意愿运行。

现在让我给你一些改进和优化代码的建议。

1.尽量避免内联样式。使用 Bootstrap 类为您的 html 元素设置样式。

**Example:**

    <span class="badge" style="background-color: white; padding:3px;">
        ....
    </span>

Change it to:

    <span class="badge bg-white p-1">
        ....
    </span>

Read: Bootstrap [Background Color][1], [Spacing][2], [Colors][3]

2。使用引导程序的结构来组织您的导航链接

    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link text-white text-center">
                <i class="fas fa-heart"></i>
                <span class="badge bg-white text-primary p-1">{{wish|length}}</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link text-white text-center">
                <i class="fas fa-bell"></i>
                <span class="badge bg-white text-primary p-1">{{wish|length}}</span>
            </a>      
        </li>
    </ul>
Read: [Bootstrap Navbar][4]

3.确保关闭每个标签。 （在您的代码中，一些标签不是 关闭。）

Answer 3

请务必使用 css 中提供的 flexbox。

Answer 4

尝试使用.className { display: flex; } 属性