3

ウィンドウのサイズを767/768ピクセル幅未満に変更すると、本体とナビゲーションバーに奇妙な右マージン/パディングが表示されます（それぞれ20ピクセル、ナビゲーションバーの右側に合計40ピクセルの白いピクセルが表示されます）。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>

レール付きのブートストラップサスジェムを使用しています。.container役割がよくわかりません。

4

2 に答える 2

1

何も見つからなかったので、このハックを書きました。

@media (max-width: 767px) { body { padding-left: 0; padding-right: 0; } } 
.navbar { margin-left: 0; margin-right: 0; }
于 2012-12-23T21:38:52.787 に答える
0

そのメディアクエリの本文のパディングを確認してください。また、ハックの場合は、そのサイズを処理するメディアクエリに次のコードを追加してみてください。

 .navbar-inner{
    left: 0x;
 }
于 2012-12-23T20:28:04.863 に答える