2

Rails アプリケーションでは、ブートストラップを使用しています。ブラウザー ウィンドウの幅を約 900 ピクセル未満に縮小すると、背景がブラウザーの幅全体に拡張されなくなり、両側に約 20 ピクセルのスペースができます。私はこれを見ました（ブラウザのサイズを変更してもdivのサイズが正しく変更されません-単純に何が間違っているのですか？）しかし、それでも機能しませんでした。

質問: ブラウザ ウィンドウの幅を X 未満にサイズ変更したときに、スペースが作成されないようにコードを調整するにはどうすればよいですか?

アプリケーション.js

//= require bootstrap

レイアウト/_header.html.erb

<div class = "middlebar">
  <div class="container">
    <p class="navbar-text">
        Hello World!
    </p>
  </div>
</div>

スタイル.css.scss

.middlebar {
  padding: 0px 0;
  text-align: left;
  background-color: #f5f5f5;
  border-top: 1px solid #fff;
  border-bottom: 2px solid #ddd;
  margin-bottom: -20px;
}

サイズ変更前:

写真1

サイズ変更後:

写真2

4

1 に答える 1

1

Twitter ブートストラップには「responsive.css」というファイルがあり、コンテナ div 全体が 100% 幅になり、本文が約 20px になる幅 767 ピクセル未満のメディア クエリのルールがあります。ルールのpadding-leftそのpadding-right行を削除するだけで、あなたはあなたが望む結果を得るでしょう...

携帯電話に適して20pxいるので、削除する前によく考えてください。

于 2013-05-26T05:02:36.510 に答える