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

时间:2019-07-05 12:04:08

标签: bootstrap-4

我想更改切换导航栏的位置。 在md和更大的尺寸中,我有这个:NAME-Picture-Button 但在切换菜单中,我想反向显示-图片名称按钮。 我该怎么办?

    <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>

1 个答案:

答案 0 :(得分:0)

您需要像下面那样更改元素顺序:

<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>