Question

我对bootstrap很新，但我开始喜欢网格系统了。

我已经创建了一个测试布局。我现在唯一没有完成的事情就是围绕某一行设置背景。

我怎样才能在左侧和右侧有一些填充？

这是我的例子：

<!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;
}

Answer 1

看看这是否有帮助：
http://jsfiddle.net/panchroma/JAFPq/

在简单的情况下，您需要扩展自举网格宽度的背景，您当然可以通过设置负边距来实现。如果您希望背景覆盖屏幕的整个宽度，这将无法正常工作，并且当网格在窄屏幕上崩溃时，它开始变得复杂。

我找到的最佳通用解决方案是在您想要背景的区域之前关闭bootstrap容器div。然后为你需要背景的区域启动一个新的bootstrap容器，并将其包装在它自己的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请求来指定在宽屏幕和窄屏幕上发生的情况，例如您的案例中的box-shaddow填充。

祝你好运

如何将背景添加到引导网格行（包括填充！）？

1 个答案: