如何将文本添加到Bootstrap 4中的导航栏？

问题描述：

我试图在Bootstrap 4 navbar的应用程序中显示登录用户的用户名。但是，它显示为与其他元素垂直对齐。如何将文本添加到Bootstrap 4中的导航栏？

这里的例子：

<nav class="navbar navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Brand Name</a> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Foo</a> 
     </li> 
    </ul> 

    <ul class="nav navbar-nav pull-xs-right"> 
     <li class="nav-item"> 
      <span>[email protected]</span> 
     </li> 
    </ul> 

</nav>

所得E-Mail地址显示top-right，但是我希望它可以显示middle-right。

删除'拉XS-right' – ihemant360

答

你要删除类pull-xs-right这样：

<ul class="nav navbar-nav pull-xs-right"> 
    <li class="nav-item"> 
     <span>[email protected]</span> 
    </li> 
</ul>

应该是：

<ul class="nav navbar-nav"> 
    <li class="nav-item"> 
     <span>[email protected]</span> 
    </li> 
</ul>

或者使用一个ul标签，如：

<nav class="navbar navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Brand Name</a> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Foo</a> 
     </li> 
     <li class="nav-item"> 
      <span>[email protected]</span> 
     </li> 
    </ul> 

</nav>

希望这有助于。

感谢您的建议跨度youself，但它不能帮助解决垂直对齐问题，它使文本显示在左侧，我希望它正确地浮动。 –

对不起，我的坏，错误的描述。文本应该位于导航栏的垂直中间，现在它与顶部边框垂直对齐。 –

答

尝试导航栏文本李这样

<nav class="navbar navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Brand Name</a> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Foo</a> 
     </li> 
    </ul> 

    <ul class="nav navbar-nav pull-xs-right"> 
     <li class=" nav-item navbar-text"> 
      <span>[email protected]</span> 
     </li> 
    </ul> 

</nav>

见例如here

不幸的是，在Bootstrap 4中没有'.navbar-text'类。 –

答

类.nav-link加入跨度，然后相应风格的它的颜色像这样：

这里小提琴Fiddle Demo

.navbar-light .navbar-nav span.nav-link, 
.navbar-light .navbar-nav span.nav-link:hover, 
.navbar-light .navbar-nav span.nav-link:focus{ 
    color:rgba(0,0,0,0.8); 
}

它应该看起来像下面这样：

<nav class="navbar navbar-light bg-faded"> 

    <a class="navbar-brand" href="#">Brand Name</a> 

    <ul class="nav navbar-nav"> 
     <li class="nav-item"> 
      <a class="nav-link" href="#">Foo</a> 
     </li> 
    </ul> 

    <ul class="nav navbar-nav pull-xs-right"> 
     <li class="nav-item"> 
      <span class="nav-link">[email protected]</span> 
     </li> 
    </ul> 

</nav>

或者你可以保持您的标记和风格无论你喜欢

.navbar-nav span { 
    display: block; 
    padding-top: .425rem; 
    padding-bottom: .425rem; 
}

这是为了嘲笑我的口味，不过谢谢。它看起来像Bootstrap 4是未完成的方式，现在必须恢复到版本3。 –

编辑我的答案，在底部包括一个不太冒犯的方式 - bootstrap 4应该有一个更小的脚印emphisis，所以我怀疑他们会改变很多关于它现在的alpha更多只是找到bug，但你可以直接设计样式，而不是覆盖样式，如果这看起来不那么骇人 –

如何将文本添加到Bootstrap 4中的导航栏？

相关推荐