html - 小型设备上的 bootstrap 4 右侧菜单

Question

我需要在 xs 设备中将 Logo 图像放在左侧，将导航放在右侧和 Logo 图像位于 sm 设备的中心和左侧的导航。使用我的代码导航不在 xs 中向右对齐

问题是:如何在 xs 设备上对齐导航？

<div class="container-fluid border-bottom">
<div class="row d-flex align-items-sm-center">
<div class="col-6 col-sm-2 logo pt-2 pb-2 text-sm-center order-sm-2"> <img src="myimage.png"> </div>
<div class="col-6 col-sm-5 order-sm-1">
  <nav class="navbar navbar-expand-lg navbar-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav"> <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a> <a
                class="nav-item nav-link" href="#">Azienda</a> <a class="nav-item nav-link" href="#">Prodotti</a> <a class="nav-item nav-link disabled"
                    href="#">Cataloghi</a> </div>
    </div>
  </nav>
</div>
<div class="d-none col-sm-block col-sm-5 order-sm-3">&nbsp;</div>
</div>
</div>

Answer 1

在这种情况下，您将使用响应式 flexbox util 类 justify-content-end justify-content-sm-start...

<div class="container-fluid border-bottom">
    <div class="row d-flex align-items-sm-center">
        <div class="col-6 col-sm-2 logo pt-2 pb-2 text-sm-center order-sm-2"> <img src="//placehold.it/130x40"> </div>
        <div class="col-6 col-sm-5 order-sm-1">
            <nav class="navbar navbar-expand-lg navbar-light justify-content-end justify-content-sm-start">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav align-items-sm-start align-items-end"> 
                    <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                    <a class="nav-item nav-link" href="#">Azienda</a> 
                    <a class="nav-item nav-link" href="#">Prodotti</a> 
                    <a class="nav-item nav-link disabled" href="#">Cataloghi</a> 
                    </div>
                </div>
            </nav>
        </div>
        <div class="d-none col-sm-block col-sm-5 order-sm-3">&nbsp;</div>
    </div>
</div>

https://www.codeply.com/go/R04RL0gbbH