5

I'm experimenting with the Carousel example in Twitter Bootstrap 3.1.1 and I've fallen at the first hurdle. I want to add a right-aligned search box to the navigation bar, so I've added the following code (I've included some of the existing code for context):

 <div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Project name</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <!-- my insertion starts here --> <form class="navbar-form navbar-right" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> </form> <!-- my insertion ends here --> </div> </div> </div> 

The inserted code was taken from Twitter Bootstrap's "Default navbar" on the Components page. I've inserted it in the equivalent position of the Carousel's navbar, changing "navbar-left" to "navbar-right" . Unfortunately, the search box overhangs the right hand side of the navigation bar by about 15-20 pixels (I've also removed the Submit button from the above example, but if I put it back in, the submit button overhangs the navigation bar in the same way). What have I done wrong here?

(Edit: included the whole navbar section as requested)

5
  • Do you have a jsfiddle or something? Commented Feb 21, 2014 at 12:24
  • No, I downloaded the docs and made the edits on my local machine. Commented Feb 21, 2014 at 12:39
  • @DamianWalker could you include all of the navbar html? Commented Feb 21, 2014 at 14:07
  • The effects I describe can now be seen at eternam.co.uk/bootstrap/test.html. With all the bootstrap files needed, I'm not sure how I can use jsfiddle for this example. Commented Feb 21, 2014 at 14:07
  • @Thunda Thanks, I've edited the example to include the whole navbar section now. Commented Feb 21, 2014 at 14:12

1 Answer 1

4

You need to switch the inner container to container-fluid so it can allow the div to strech. Check this out:

http://www.bootply.com/115744

So this

<div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> 

Becomes:

<div class="navbar navbar-inverse navbar-static-top" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> 

EDIT Whoops I accidentally switched your divs to navs.

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.