CSS – 向网格中的某些列添加背景

好吧,我是CSS的新手,这只会给我带来麻烦.如何将背景颜色添加到多个列而不是所有列.

我想在span2上使用一种背景颜色,在span10上使用不同的颜色.我遇到的问题是填充问题.当我将背景应用于某些列时,内容周围的填充不会很好.这有意义吗？如何使用嵌套列向某些列添加背景并仍保持均匀的填充？

<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,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类正在应用背景.然后我的嵌套列有奇怪的填充,所以我通过并添加类似右键的类到需要正确填充的列和bot-pad到需要在底部填充的列.我知道这在语义上是多么令人难以置信的错误,我只是不知道如何得到我需要的结果.谢谢.

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

解决方法

在span#level上设置背景颜色并不是一个好主意.为什么？因为span#是一个定位帮助器,如果更改填充或边距,整个网格将会中断.

那么,什么是用于渲染彩色背景包装的原生Twitter Bootstrap元素？很好.

如何使用它？

首先,将井元素插入范围#：

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

第二,通过.well类的扩展名分配属性(我使用过.well-red)：

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

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

CSS – 向网格中的某些列添加背景

解决方法

猜你在找的CSS相关文章