Question

请参阅下面导航栏的HTML代码。

<header>
    <div class="navbar navbar-fixed-top center">
        <div class="navbar-inner">
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><a href="#">item 1</a><li>
                    <li><a href="#">item 2</a><li>
                    <li><a href="#">item 3</a><li>
                    <li class="active"><a href="#">item 4</a><li>
                </ul>
                <ul class="brand">
                    <li><p>logo text</p></li>
                </ul>
                <ul class="budget">
                    <li><p>item on right</p></li>
                </ul>
            </div>
        </div>  
    </div>
</header>

我使用以下CSS来集中品牌徽标。这很好用。

.navbar .brand {
margin-left: auto;
margin-right: auto;
width: 100px;
float: none;
list-style: none;}

.center .navbar-inner {
text-align:center;}

我被困在如何使项目在右边（与班级＆＃34;预算＆＃34;）向右移动。我已经尝试过使用navbar-right bootstrap类但这没有用。我也尝试调整我用来居中徽标的CSS但不知何故我要对齐的项目不断出现在导航栏中心和下方。有人可以告诉我如何在右边显示这个项目吗？

提前致谢，

Stijn

Answer 1

由于你的navbar html标记有点乱，我决定为你的目的做一个干净的标记。

基本上我只添加了一个CSS类并摆脱了你的。

.nav.nav-center {
    margin:0 auto;
    display: inline-block;
    float:none;
}

这里是你改编的HTML

<header>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>      
    </div>

    <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav nav-center brand">
        <li><p>logo text</p></li>
      </ul>
      <ul class="nav navbar-nav navbar-right budget">
        <li><p>item on right</p></li>

      </ul>      
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

<强>更新

如果你想在左边有项目，你必须更改HTML标记，并将品牌元素作为最后一个放在两个浮点数之间，如下所示：

<header>
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>      
    </div>

    <div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav pull-left">
        <li><p>Left Content1</p></li>
        <li><p>Left Content1</p></li>
      </ul>      
      <ul class="nav navbar-nav navbar-right budget">
        <li><p>item on right</p></li>
      </ul>            
      <div class="nav-center brand">logo text</div>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header>

将CSS类更改为：

.nav-center {
   position: absolute;
   margin-left: 47%;    
}

输入完内容后，请使用margin-left百分比进行播放。

另请阅读此问题以获取有关您的问题的更多信息：centering a div between one that's floated right and one that's floated left

Working example

如何在引导程序中创建导航栏，内联显示左侧，中间和右侧的导航项？

1 个答案: