1

私は多くの同様の質問を経験しており、解決策を私のケースに適応させようとしましたが、成功していません。

リーダーのようなものを実装しようとしているので、ページの中央に表示したい閲覧ウィンドウがあります。ペインのサイズを制限して、ユーザーが大きなブラウザー ウィンドウの全幅にまたがる行を読み取らないようにしたいが、そのペインをウィンドウの中央に配置したい。ペインの上に、ページの全幅にわたるヘッダーがあります。

本来は閲覧枠に「span8 offset2」を使おうとしたのですが、ウィンドウのサイズが小さくなるので、枠が縮小する前に余白をなくしたいので、この設定を使うと閲覧枠が不必要に縮小してコンテンツを圧迫してしまうので、ウィンドウが薄くなります。

「max-width: 700px」が設定された「span12」を使用するだけで、閲覧ペインが必要に応じて縮小するという点で正しい動作が得られますが、div をページの中央に配置できません。

これが私が取り組んでいるものです：

<body>
  <div class="container">
    <div class="row-fluid">
      <div class="span12 reading-pane">
        <div class="row-fluid">
          <div class="nav">
            <div class="span6 offset3">
              Main Navigation
            </div>
            <div class="span2 offset1">
              Nav2
            </div>
          </div>
        </div>
        <div class="row-fluid">
          <div class="span12">
            <div class="body-text">
              Text Area
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

閲覧ウィンドウのスタイルは次のとおりです。

.reading-pane {
  border: solid;
  border-color: #ccc;
  border-width: 3px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  min-height: 40px;
  line-height: 40px;
  max-width: 700px;
}

以下を .reading-pane スタイルに (個別に) 追加しようとしました。

float: none;
margin-left: auto;
margin-right: auto;

 

margin: 0 auto;

 

float: none;
margin: 0 auto;

また、ヘッダー テキストを中央に配置するコンテナー内のテキストを中央に配置しようとしましたが、閲覧ウィンドウには配置しませんでした。

では、span12 div をページの中央に配置するにはどうすればよいでしょうか。

4

2 に答える 2

1

あなたが使用しているので、row-fluidブートストラップ 2.0 を使用していると思います。Bootstrap 3.0 はレスポンシブ グリッドをもう少しクリーンに処理するため、可能であれば 3.0 の使用をお勧めします。

次に、最大幅をコンテナーに移動します。 

.container {
    max-width: 700px;
}

700 にはガターが含まれているため、730 を使用することをお勧めします。

または、max-width を使用するよりも、Twitter ブートストラップのダウンロードをカスタマイズ ( http://getbootstrap.com/customize/ ) し、700 が重要な場合はそこで独自の幅を定義できます。その後、より大きな @media クエリを削除することもできます。

3.0 でのグリッドの実行方法には他にもいくつかの調整があり、このフィドルに含めました: http://jsfiddle.net/PQM34/2/

于 2013-11-11T21:41:18.207 に答える