css - ブートストラップを使用してレスポンシブ Web サイトをセンタリングする

Question

私が欲しいのは、私のウェブサイトの左右の境界線を持つ中央のコンテンツです。コードを持つことで得られるもののタイプ:

.container {
    width: 90%;
    margin: 0 auto;
}

ただし、私は twitter ブートストラップを使用していますが、それでも Web サイトの応答性を維持したいと考えており、上記の操作を行うとグリッドレイアウトが壊れているようです。

誰かがこれを行うための適切な方法について私にアドバイスできますか?

score 0 · Accepted Answer

流体グリッドspan12のドキュメントに記載されているように、ルートコンテナを使用すると、組み込みの応答性を損なうことなく、箱から出してすぐに解決できます。

編集： 以下のコメントに対処するために、上記のJSBinを更新しました。エッセンスは次のとおりです。

CSS：

.centeredContent{
  width: 90%;
  margin: 0 auto;
}

HTML：

<div class="span12">
  <div class="centeredContent">

  <!-- your content -->

  </div> <!-- /centeredContent -->
</div> <!-- /span12 -->

score 0 · Accepted Answer

私はtwitterを使用していませんが、マージンのあるcssを使用してhtmlでオブジェクトを中央揃えにする標準的な方法は次のとおりです。

.container {幅：90％; マージン：0自動0自動; }

これは、次と同じ結果をもたらすはずです。

.container {幅：90％; マージン：0 5％0 5％; }

と：

.container {幅：90％; マージン左：5％; マージン右：5％; }

score 0 · Accepted Answer

このページは、レスポンシブな Bootstrap サンプルページの 1 つです。

このページを Firebug すると、メインの「コンテナ」クラスが単純に以下を使用していることがわかります。

.container {
    margin-left: auto;
    margin-right: auto;
}

3 に答える 3