Question

我一直在尝试的是导航栏列表项应该位于中心，并且只有4个列表，在它们之间标识应该出现在右侧，应该有登录选项。请帮助解决我的问题。

<div class="navbar navbar-fixed-top navbar-custom ">
 <div class="container" >
  <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
</div>
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#about">Menu Item 1</a></li>
    <li><a href="#contact">Menu Item 2</a></li>
    <li><a href="#about">Menu Item 3</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
  </ul>
</div>

Answer 1

您可以使用解决方案https://jsfiddle.net/dy27440n/

＆＃13;

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><img src="images/Logo_B.png" class="img-responsive"></a></li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

具有中心和右对齐项目和徽标的Bootstrap NavBar应该位于nav元素的列表项之间

1 个答案: