如何更改折叠导航栏中项目的对齐方式？

Posted 2023-03-21

【中文标题】如何更改折叠导航栏中项目的对齐方式？

【英文标题】：How to change alignment of items in collapsed navbar?

【发布时间】：2021-10-09 18:32:06

【问题描述】：

我在从左到右移动项目（在这种情况下为无序列表 <ul> 内的链接 (<a>)）时遇到困难，我只想在手机版本上执行此操作。

我已尝试使用 justify-content-end、flex-column-reverse 和 flex-row-reverse Bootstrap 类。

Picture of how it looks like currently (rectangle) and arrow showing where I want to move it

代码：

<nav class="navbar sticky-top navbar-expand-lg navbar-dark border border-dark bg-dark" style="opacity: 80%;">
    <div class="container">
      <a class="navbar-brand" href="index.html">
        <img class="imglogoheader" src="logo.svg"  style="width: 50px; height: 45px;">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
        aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse  navbar-collapse" id="navbarTogglerDemo03">
        <li class="nav-item active me-3">
          <a class="nav-link" href="#">Početna <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item me-3">
          <a class="nav-link" href="#izazov">Izazov</a>
        </li>
        <li class="nav-item me-3">
          <a class="nav-link" href="#rezultati">Rezultati</a>
        </li>
        <li class="nav-item me-3">
          <a class="nav-link" href="#paketicijene">Paketi i cijene</a>
        </li>
        <li class="nav-item me-3">

          <a class="nav-link ">Kontakt</a>

        </li>

        </ul>

      </div>
    </div>
  </nav>

【参考方案1】：

在 CSS 文件中添加样式

@media all and (max-width: 500px) and (min-width: 320px)
  .navbar-collapse
      position: relative;
    
    
    ul
      position: relative;
      right: 0;
      float: right;
      text-align: end;
    

【讨论】：

我试过了，可惜没用...

你能不能创建一个 StackBlitz 并分享它。如果是这样就很容易解决