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/

在Bootstrap 3网格中的同一行内定义同一类的列

1 个答案: