3

When I resize the windows below 767/768 px width, the body and navbar get a strange right margin/padding (20px each ; which does a total of 40 white pixels at the right side of the navbar). I can't find if it is a BS normal behavior or if I did something wrong.

The only fragment of css size/padding/margin bootstrap overwriting is :

.navbar { margin-bottom: 20px; }

Here the HTML :

<body>
  <header class='navbar navbar-static-top'>
    <nav class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <div class='icon-bar'></div>
          <div class='icon-bar'></div>
          <div class='icon-bar'></div>
        </a>
        <a href="/" class="brand">Brand Name</a>
        <div class='nav-collapse collapse'>
          <ul class='nav'>
            <li><a href="...">...</a></li>
            <li><a href="...">...</a></li>
            <li><a href="...">...</a></li>
          </ul>
          <form accept-charset="UTF-8" action="/search" class="navbar-search pull-right" method="get">
            <input class="search-query" id="q" name="q" placeholder="Search" type="text" />
            <input class="hidden" type="submit" value="Find" />
          </form>
        </div>
      </div>
    </nav>
  </header>
  <div class='container'>
    <div class='row'>
      <div class='span12'>
        <!-- ... -->
      </div>
    </div>
  </div>
</body>

I use bootstrap-sass gem with rails. I'm unsure about .container role.

Habax
  • 1,274
  • 17
  • 26

2 Answers2

1

I didn't find anything, so I wrote this hack:

@media (max-width: 767px) { body { padding-left: 0; padding-right: 0; } } 
.navbar { margin-left: 0; margin-right: 0; }
Habax
  • 1,274
  • 17
  • 26
  • Thanks for a solution. That said, I'm puzzled. There has to be a better way. Pull-right should not impact the padding, should it? – codenoob Oct 12 '14 at 15:38
  • OK, there is a better solution, at least to the issue I was trying to fix, which is navbar-right. See this answer: http://stackoverflow.com/questions/15118310/bootstrap-navbar-align-want-align-to-the-right – codenoob Oct 12 '14 at 15:42
  • I think I was wrong navbar-right doesn't fix the problem that I had. – codenoob Oct 12 '14 at 16:43
0

Check the padding on the body for that media query. Also for a hack try adding the following code to the media query handling that size:

 .navbar-inner{
    left: 0x;
 }
Ryan Rich
  • 11,637
  • 8
  • 22
  • 31