3

I'm trying to implement a responsive navbar. It seems to work, but when the screen gets smaller, there appears a gap on the right side. See screen shot:

enter image description here

I haven't written any CSS. All of this is pure Bootstrap still.

Update 1: jsFiddle

http://jsfiddle.net/BaR3q/ - It's doing it on JSFiddle, too. So either I did something wrong (likely) or Twitter messed up (unlikely). what to do?

4

3 回答 3

1

There is nothing in the markup that specifies that the elements should expand to fill the viewport. Adding body { width: 100%} will take care of it, or optionally overriding the width of the navbar to be auto.

Twitter Bootstrap is intended to be scaffolding and components rather than an out of the box solution, so this is likely one of those things that needs to be specified. The static version of the navbar is likely written so that it can be easily used in containers other than the body and this happens to fall in the 20% of situations where it needs a nudge.

于 2012-10-22T11:12:09.753 回答
0

A few potential reasons come to mind, but as others have pointed out it's difficult to say without seeing code. I'll add, though, that I understand how tough it can be to share enough of your code for something like this without giving too much away. So here are some questions (and for this specific issue, you shouldn't use .container-fluid as previously suggested. that probably won't work anyway, and if it does it's only masking a problem that might compound):

  • did you change any responsive styles? If so, did you change the width, padding, or margins on .container?
  • Did you apply a width or margin to the .navbar itself somewhere in the responsive styles? This seems a likely cause to me.
  • What about <body>, did you set padding on that?
于 2012-10-22T02:11:30.417 回答
0

I solved this problem by adding (either) one of the following meta tags:

<meta name="viewport" content="initial-scale=1">

<meta name="viewport" content="user-scalable = no">
于 2014-02-06T00:43:54.710 回答