响应Twitter引导：<body>和navbar右边距填充/边距在宽度<767/768px时出现

当我调整767/768像素宽度以下的窗口大小时，正文和导航栏会得到一个奇怪的右边距/填充（每个20px;在导航栏的右侧共有40个白色像素）。我找不到这是一个BS正常行为还是我做错了什么。响应Twitter引导：<body>和navbar右边距填充/边距在宽度<767/768px时出现

CSS大小/填充/保证金引导重写的唯一片段是：

.navbar { margin-bottom: 20px; }

在这里，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>

我使用自举-萨斯宝石与导轨。我不确定.container的角色。

来源

2012-12-23 Habax

也请参见http：//计算器.com/questions/16410659/bootstrap-removing-padding-margin-when-screen-size-is-smaller –

我没有发现任何东西，所以我写了这个技巧：

@media (max-width: 767px) { body { padding-left: 0; padding-right: 0; } } 
.navbar { margin-left: 0; margin-right: 0; }

来源

2012-12-23 21:38:52 Habax

感谢您的解决方案。这就是说，我很困惑。一定有更好的方法。右拉应该不会影响填充，如果它？ – codenoob

好的，有一个更好的解决方案，至少对于我试图解决的问题，这是navbar的权利。看到这个答案︰http://stackoverflow.com/questions/15118310/bootstrap-navbar-align-want-align-to-the-right – codenoob

我认为我是错误的导航栏 - 权利并没有解决我的问题。 – codenoob

检查该媒体查询的正文的填充。也为黑客尝试添加以下代码到媒体查询处理那些尺寸：

.navbar-inner{ 
    left: 0x; 
}

来源

2012-12-23 20:28:04 ryanSrich

它没有工作：/ – Habax

响应Twitter引导：<body>和navbar右边距填充/边距在宽度<767/768px时出现

回答

相关问题