响应式推特引导程序： <body> 宽度< 767/768 像素时出现导航栏右填充/边距

当我将窗户调整到767/768 PX宽度以下时，身体和Navbar获得了一个奇怪的右键/填充（每个20px；右侧为40个白色像素，Navbar）。我找不到是BS的正常行为，还是我做错了什么。

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>

我使用带有轨道的bootstrap-sass宝石。我不确定.container角色。

我什么都没找到，所以我写了这个hack：

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

检查该媒体查询的身体上的填充。同样，对于黑客，尝试将以下代码添加到媒体查询处理大小：

 .navbar-inner{
    left: 0x;
 }

相关内容

最新更新

热门标签：