Bootstrap导航栏：左侧元素的宽度影响元素在中心的位置

Posted 2023-03-29

【中文标题】Bootstrap导航栏：左侧元素的宽度影响元素在中心的位置

【英文标题】：Bootstrap navbar: Width of left element affects position of element in the center

【发布时间】：2017-09-11 15:06:49

【问题描述】：

我是 bootstrap 3 的新手。目前我想将导航栏对齐到中心。我用这个approach 做了这个，效果很好。 现在我的问题是我的 navbar-brand 元素的宽度会影响居中内容的位置，例如如果品牌变大，元素会向左移动。有没有办法将导航栏的元素定位在屏幕的“真实”中心？ 目前看起来是这样的： 但我想像这样在屏幕的真正中心，但带有品牌：

我的html：

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand navbar-left" href="#"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#">Stuff</a></li>
              </ul>
            </li>
            <li><a href="#about">Karriere</a></li>
            <li><a href="#contact">Über uns</a></li>
            <li><a href="#contact">Kontakt</a></li>             
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

我的 CSS：

@media (min-width: $grid-float-breakpoint) 
    .navbar .navbar-nav 
        display: inline-block;
        float: none;
        vertical-align: top;
    

    .navbar .navbar-collapse 
        text-align: center;
    

谢谢你的帮助！

【问题讨论】：

这是个好问题。这是also an issue in Bootstrap 4，因为 flexbox 居中的工作方式。

【参考方案1】：

使 navbarbrand 的根元素具有绝对位置似乎可以达到预期的效果。这会导致您的导航链接居中而不考虑 navbarbrand 元素。注意：如果您的“品牌”文本长度过长，它将与导航链接重叠。 https://jsbin.com/juyanijeku/edit?output

.navbar-header 
  position: absolute;

【讨论】：

这完全符合我的要求。非常感谢！

【参考方案2】：

我尝试过类似的方法

a.navbar-brand 
  display: block;
  float: none;
  text-align: center !important;  


.nav> li 
 display:inline-block !important;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header text-center">
         
          <a class="navbar-brand" href="#">
          Brand
          </a>
        </div>
        <div id="navbar">
          <ul class="nav navbar-nav text-center">
            
            <li><a href="#about">Karriere</a></li>
            <li><a href="#contact">Über uns</a></li>
            <li><a href="#contact">Kontakt</a></li>             
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>