【问题标题】:Keep navbar menu on center when adding a navbar brand添加导航栏品牌时保持导航栏菜单居中
【发布时间】:2020-11-26 07:09:11
【问题描述】:

我在添加导航栏品牌时无法将菜单项保持在中心位置。 当我在导航栏左侧添加徽标时,菜单项会略微向右移动? 如何保持居中? 这是我的导航栏代码(引导程序):

        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
          <a class="navbar-brand" href="#"><img class="img-fluid" src="https://psmedia.playstation.com/is/image/psmedia/call-of-duty-warzone-badge-01-ps4-en-27feb20_1583405365530?$HugeHero_Badge$" height="15%" width="15%"></a>
          <ul class="navbar-nav mx-md-auto mt-2 mt-lg-0">
            <li class="nav-item active">
              <a class="nav-link" href="#">WEAPONS <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">LOADOUTS</a>
            </li>
          </ul>
         
          <a href="#" class="button btn-lg btn-info text-center">TEST</a>
        </div>
      </nav>

【问题讨论】:

    标签: html twitter-bootstrap


    【解决方案1】:

    使用您在此处提供的代码是一种快速解决方法。它可能不是最有条理的解决方案,但它应该可以工作。

    你的 Styles.css

    /* Set all contents in container to be centered automatically */
    #navbarTogglerDemo01 {
      position: absolute;
      top: 0px; left: 0px;
      width: 100vw;
      max-width: 100vw;
      display: block;
      text-align: center; 
    }
    
    /* And all direct sub tags display inline block */
    .navbar-brand .navbar-nav .button {
      display: inline-block;
    }
    

    另一个快速解决方案,但不是 100% 响应:

    /* This will move each block slightly back to the left, remember to provide a unit to move left. */
    .navbar-brand, .navbar-nav{
      position: relative;
      left: -10px; /* Change this to your custom amount: px % em ... etc */
    }
    

    如果这有帮助或您有任何疑问,请告诉我。 祝你好运!!

    【讨论】:

    • 导航栏菜单现在居中!但是我还有另一个问题,当我使用您建议的样式代码时,它会破坏我在移动视图中的导航栏。导航菜单不会隐藏和重叠在其他设计上。
    • 仅凭那一点点代码很难知道。我可以在导航旁边看到至少包含父容器和元素的更多代码吗?
    • 我只在导航栏,没有别的。调用带有 jquery 脚本和 popper 和 bootstrap css 的简单 html 标签。
    • 对不起,在第二个解决方案中,而不是 // 应该是 /* ... */ 。那条评论正在取消下一步的样式。除此之外,这个解决方案应该可以在不破坏您的实际设计的情况下运行。我已经更新了代码。
    猜你喜欢
    • 1970-01-01
    • 2021-07-25
    • 1970-01-01
    • 1970-01-01
    • 2015-01-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-06
    相关资源
    最近更新 更多