1

私はブートストラップにまったく慣れていませんが、グリッドシステムが好きになり始めています。

テストレイアウトを作成しました。私が今までに達成していない唯一のことは、ある列の周りに背景を置くことです。

左右にパディングを付けるにはどうすればよいですか？

これが私の例です：

<!DOCTYPE HTML>
<html>
    <head>
        <meta content="text/html; charset=UTF-8">
        <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    </head>
    <body>
        <div class="container" id="container">
            <div id="header" class="row">
                <div class="span12">Hallo123</div>
            </div>
            <div id="main" class="row">
                <div class="span10" id="one">
                    <div class="row">
                        <div class="span2">Hallo1</div>
                        <div class="span2">Hallo2</div>
                        <div class="span2">Hallo3</div>
                        <div class="span2">Hallo4</div>
                        <div class="span2">Hallo5</div>
                    </div>
                </div>
                <div class="span2" id="two">Hallo2</div>
            </div>
        </div>
    </body>
</html>

CSS：

#main {
    background-color: white;
    box-shadow: 0px 0px 6px #888;
}

#header .span12 {
    background-color: #DD1144;
}

#container {
    background-color: #DF8505;
}

#one, #two, #three, #four {
    background-color: #0088CC;
}
4

1 に答える 1

1

これが役立つかどうかを確認してください：http：
//jsfiddle.net/panchroma/JAFPq/

ブートストラップグリッドの幅を超えて背景を拡張する必要がある単純なケースでは、負のマージンを設定することで確実にそれを行うことができます。ただし、背景が画面の幅全体をカバーするようにしたい場合は、これはうまく機能しません。狭い画面でグリッドが折りたたまれると、複雑になり始めます。

私が見つけた最も一般的な解決策は、背景が必要な領域の直前でブートストラップコンテナdivを閉じることです。次に、背景が必要な領域の新しいブートストラップコンテナを開始し、これを独自のdivでラップします。このdivは、自由に操作できます。 

<div class="container" id="container">
        <div id="header" class="row">
            <div class="span12">Hallo123</div>
        </div><!-- end header -->
</div><!-- end container -->

<div class="backgroundHere"><!-- start of div where you want the background -->
<div class="container">     
        <div id="main" class="row">
            <div class="span10" id="one">
                <div class="row">
                    <div class="span2">Hallo1</div>
                    <div class="span2">Hallo2</div>
                    <div class="span2">Hallo3</div>
                    <div class="span2">Hallo4</div>
                    <div class="span2">Hallo5</div>
                </div><!-- end nested row -->
            </div><!-- end span 10 -->

            <div class="span2" id="two">Hallo2</div>

        </div><!-- end row -->
 </div><!-- end container -->
 </div><!-- end backgroundHere -->

<!-- you could open another bootstrap container here if you have more content without the background -->

背景の詳細​​によっては、@ mediaリクエストを使用して、広い画面と狭い画面で何が発生するかを指定する必要がある場合があります。たとえば、ケースのボックスシャドーパディングです。

幸運を

于 2013-01-12T14:11:15.897 に答える