html - Bootstrap 3 网格中同一行中同一类的样式列

Question

使用 Bootstrap 3:

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

在行中，我可以通过将 div class="row"更改为 div class="row top_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

你可以使用 nth-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/