Question

我需要在左侧放置徽标图像，并在xs设备中向右导航中心的徽标图像和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

bootstrap 4小设备上的右侧菜单

1 个答案: