1

So what I'm trying to do is have my navbar automatically center to anything that's in it.

What I want is:

  • Logo all the way on the left (pulled left)
  • Button all the way on the right (pulled right)
  • Search bar directly in the center of the navbar

What I've been having problems with is that the button can have different width (because it's a button where your username is displayed) and this moves the search bar I have making it not centered.

Here's my current code:

<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>

Note: The width of the navbar should be 883px. The rest of the CSS should be Bootstrap's default.

Please help!

4

2 回答 2

1

It should work as you've described, but that isn't what your code reflects.

Add pull-left to the <a> with the logo so it floats left. Get rid of pull-right from the <form> so it's not floating. Make sure both floating elements (the <a> and <ul> are defined before the <form>).

于 2013-03-30T22:28:59.803 回答
1

you could float the elements, adjust the width. like in this example http://jsfiddle.net/kevinPHPkevin/smWBZ/

.logo {
    float:left;
}
于 2013-03-30T23:40:06.547 回答