在Bootstrap 3网格中设置同一行中同一类的列的样式

Question

使用引导3：

我有一行，div class=“row”，有两列，都是div class=“col-xs-6”。我想用不同的颜色来设计每个列的样式，比如说列本身的背景色、边框和填充，但是它们都属于同一个类“col-xs-6”。

在行中，我可以通过将div class=“row”更改为div class=“row top\u row”来添加类名，以将该特定行与所有其他行类区分开来。当我尝试通过将div class=“col-xs-6”更改为div class=“col-xs-6 left_column”来对列执行相同操作时，该样式不适用。相反，将删除该特定列的所有样式。

如何将不同的样式应用于同一行中相同大小（又名类名）的列？

<div class="row">
        <div class="col-xs-6">
            <h2>I am a:</h2>
            <ul>
                <li><a href="#">woman</a></li>
                <li><a href="#">man</a></li>
            </ul>
        </div>
        <div class="col-xs-6">
            <h2>interested in:</h2>
            <ul>
                <li><a href="#">women</a></li>
                <li><a href="#">men</a></li>
                <li><a href="#">both</a></li>
            </ul>
        </div>

Answer 1

您可以使用n-child（）选择器

HTML

<div class="row">
    <div class="col-xs-6">
        <h2>I am a:</h2>
        <ul>
            <li><a href="#">woman</a></li>
            <li><a href="#">man</a></li>
        </ul>
    </div>
    <div class="col-xs-6">
        <h2>interested in:</h2>
        <ul>
            <li><a href="#">women</a></li>
            <li><a href="#">men</a></li>
            <li><a href="#">both</a></li>
        </ul>
    </div>

CSS

div.col-xs-6:nth-child(1){
    background-color: rgb(0,255,0);
}

div.col-xs-6:nth-child(2){
    background-color: rgb(255,0,0);
}

例子：http://jsfiddle.net/9BS36/