Question

我有一个按钮（class =“navbar-toggler”），它会折叠并且工作正常，但当我点击它时，它会显示左侧的所有菜单项（链接），看起来很糟糕！

我需要将菜单项链接移动到右边...我已经尝试了我能在这里找到的所有内容......但没有任何东西使菜单项（链接）向右移动......

任何人都可以帮我解决这个问题吗？

这是代码：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">Hello All</a>
    <button class="navbar-toggler" data-toggle="collapse" datatarget="#navbarNav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

非常感谢你的帮助!!!

Answer 1

您可以使用“navbar-nav”中的“text-right”类：

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand" href="#">Hello All</a>
        <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto text-right">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Answer 2

尝试将班级<tr *ngFor="let row of viewPortItems; let rowIdx = index" (click)="onRowSelected(rowIdx)" [class.active]="rowIdx === selectedRow"> <ng-container *ngFor="let dataItem of row; let i = index;">添加到导航代码

或者您也可以尝试

.table tr.active td {
    background-color: #5bc0de;
    color: azure
}

Answer 3

您是否考虑使用像pushy这样的菜单？您可以在左侧或右侧放置菜单。如果需要，它很容易改变:) https://chrisyee.ca/pushy/

Bootsrap 4按钮切换菜单项到右边......？

3 个答案: