6

好的，我是 CSS 新手，这只会给我带来麻烦。如何将背景颜色添加到多列但不是所有列。

我想要 span2 上的一种背景颜色和 span10 上的另一种颜色。我遇到的问题是填充问题。当我将背景应用于某些列时，它不会在内容周围有很好的均匀填充。这有意义吗？如何为具有嵌套列的某些列添加背景并仍然保持良好的填充？

HTML

<div class="row bg">
  <div class="span10"> 

        <!-- Main hero unit for a primary marketing message or call to action -->
        <div class="sidebar">
            <div class="hero-unit">
                <h1>Join</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
                <p><a class="btn btn-primary btn-large">Register Now &raquo;</a></p>
            </div>
        </div>

        <!-- Example row of columns -->
        <div class="row">
            <div class="span5">
                <div class="bot-pad">
                    <h2>We are Fun!</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
            </div>
            <div class="span5">
                <div class="right-pad bot-pad">
                    <h2>Learn more about yourself</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn" href="#">View details &raquo;</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.bg
{
    background: url('/assets/img/grid.png');
    .border-radius(5px); //LESS mixin for creating border radius
}
.right-pad
{
    padding-right: 20px;
}

.bot-pad
{
    padding-bottom: 20px;
}

解释

所以bg班级正在应用背景。然后我的嵌套列有奇怪的填充，所以我经历并添加了类，比如right-pad需要右填充的bot-pad列和底部需要填充的列。我知道这在语义上是多么的错误，我只是不知道如何获得我需要的结果。谢谢。

这是我正在尝试做的另一个例子......但是他们也没有提供解决方案 https://github.com/twitter/bootstrap/issues/1446

4

1 回答 1

10

background-color在span#级别上设置不是一个好主意。为什么？因为span#是定位助手，如果您更改填充或边距，整个网格将中断。

那么，用于渲染彩色背景包装的原生 Twitter Bootstrap 元素是什么？是well。

如何使用它？

首先，将well元素插入到span#：

<div class="span5">
    <div class="well well-red">
        <!-- Your content -->
    </div>
</div>

其次，通过类的扩展来分配属性.well（我用过.well-red）：

.well-red {
    background-color: #ff0000;
}

这样，您始终可以使用父类.well，但您可以随意应用不同的属性。

于 2012-09-26T07:13:06.927 回答