时间戳

首页 > 解决方案 > 如何在切换菜单中更改位置

bootstrap-4 - 如何在切换菜单中更改位置

问题描述

我想更改切换器导航栏中的位置。在 md 和更大的文件中，我有这个：名称 - 图片 - 按钮，但在切换器菜单中我想反向显示 - 图片名称按钮。我怎样才能做到这一点？

    <ul class="navbar-nav d-flex ">

    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span>Mark Hohmann</span>
          <img src="https://evdo8pe.cloudimg.io/s/resizeinbox/400x400/http://b2bnew.widmannsrl.com/ImmaginiSitoB2B/Articoli/max/C6366_nc__C6366_a.jpg" alt="foto" class="rounded-circle ml-1" height="50" width="50">
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Settings</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sign Out</a>
        </div>
    </li>           
    </ul>

标签： bootstrap-4

解决方案

您需要更改元素顺序，如下所示：

<ul class="navbar-nav d-flex ">

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

      <img src="https://evdo8pe.cloudimg.io/s/resizeinbox/400x400/http://b2bnew.widmannsrl.com/ImmaginiSitoB2B/Articoli/max/C6366_nc__C6366_a.jpg" alt="foto" class="rounded-circle ml-1" height="50" width="50">
       <span>Mark Hohmann</span>
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Settings</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Sign Out</a>
    </div>
</li>           
</ul>

推荐阅读