Question

所以我要做的就是让我的导航栏自动居中于其中的任何内容。

我想要的是：

左边的标志（向左拉）
按钮一直向右（向右拉）
直接在导航栏中心搜索栏

我遇到的问题是按钮可以有不同的宽度（因为它是显示用户名的按钮），这会移动我使其不居中的搜索栏。

这是我目前的代码：

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#"><img src="./assets/img/test_logo.png" /></a>
        <div class="nav-collapse collapse">
          <div class="span4 offset1">
            <form class="navbar-form pull-right">
              <div class="input-append">
                <input class="span4" id="appendedInputButton" type="text" placeholder="Search...">
                <button class="btn" type="button"><i class="icon-search"></i></button>
              </div>
            </form>
          </div>
          <ul class="nav pull-right">
            <a class="button btn-active" href="" style="margin-top:5px" ><span><i class="icon-user"></i> Sign In</span></a>
          </ul>
        </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

注意： 导航栏的宽度应为883px。 CSS的其余部分应该是Bootstrap的默认值。

请帮忙！

Answer 1

它应该如您所描述的那样工作，但这不是您的代码所反映的。

将pull-left添加到带有徽标的<a>，使其向左浮动。从pull-right中删除<form>，使其不浮动。确保在<{em> <a>）之前定义了两个浮动元素（<ul>和<form> 。

Answer 2

你可以漂浮元素，调整宽度。就像在这个例子http://jsfiddle.net/kevinPHPkevin/smWBZ/

中一样

.logo {
    float:left;
}

居中我的导航栏

2 个答案: