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

See if this helps:
http://jsfiddle.net/panchroma/JAFPq/

In simple cases where you need to extend the background beyound the width of the bootstrap grid, you could certainly do it by setting negative margins. This wouldn't work so well if you want the background to cover the entire width of the screen though, and it starts getting complicated as the grid collapses on narrow screens.

The best general solution I have found is to close the bootstrap container div just before the area where you want the background. Then start a new bootstrap container for the area where you need the background and wrap this in it's own div which are are free to manipulate however you want. 

<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 -->

Depending on the specifics of your background, you may need to also use @media requests to specify what happens at wide and narrow screens, for example the box-shaddow padding in your case.

Good luck

于 2013-01-12T14:11:15.897 回答