2

ウェブサイトのスタイリングにブートストラップ CSS を使用しています。私のコードは簡単です

<div id="outer" class="container" style="border:solid">
    Test
    <div id="inner"class="container" style='border:solid width="1280px" '>
       some text
    </div>
</div>

ブートスタープを使用しているため、外側の div の幅は 1170px ですが、ご覧のとおり、内側の div の幅を 1280px にハードコーディングしています。これは親 div よりも広いです。下の図からわかるように、内側の div の右端は外側の div に重なっていますが、左端は同じままです。

私の質問は、内側の div の右側を拡張するだけでなく、内側の div の左側も拡張するにはどうすればよいかということです。つまり、常に内側の div を中央に揃えます。

このhttp://jsfiddle.net/FQUXQ/で私を助けてください 。

- - - - - - - - - アップデート - - - - - - - - - - -

http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works この記事では、グリッド システムのしくみについて説明します。

ここに画像の説明を入力

4

1 に答える 1

3

あなたの投稿のコードは言う

style='border:solid width="1280px" '

しかし、私はあなたが意味すると思います

style='border:solid;width:1280px"

しかし、それは単なるタイプミスだと思います。ただし、@Saravananが言ったように、ブートストラップは画面サイズに基づいて幅を与えるため（メディアクエリ..）、.containerを別のコンテナ内で使用することはお勧めできません。

代わりに、コードを次のように変更する必要があります

<div id="outer" class="container" style="border:solid">
    Test
    <div id="inner" class="row" style="border:solid">
       some text
    </div>
</div>

またはさらに良いことに、ページに列が必要な場合は、

<div id="outer" class="container" style="border:solid">
    Test
    <div class="row" style="border:solid">
        <div class="col-lg-12" id="inner" >
           some text
        </div>
    </div>
</div>

小さいビューポートで異なる動作をさせたい場合は、最後の div のクラスにさらに多くのクラスを与えることもできます。だから私が言いたいのは、Bootstrap があなたに与えた要素を使用し、意図されたとおりに使用しようとするということです。これをチェックしてください：http://getbootstrap.com/css/#grid

また、インラインではなく別の CSS スタイルシートを使用することをお勧めします。

于 2013-11-14T13:15:45.187 に答える