引导中的抵消列不适用于第二行

Question

我在做天气应用。我有两行来描述当前的本地天气状况，而且由于我使用的是引导程序的网格系统，所以我需要使用offsets来(在一定程度上)对页面上的列进行居中。

我有两个row，ID是row-1和row-2。当我将一个row-1应用到它的div中时，行div工作得很好，但是对于row-2，同样的事情不起作用。

这是相关的信息-

    <div class="row" id="row-1">
        <div class="col-xs-5 col-xs-offset-4" id="picture"></div>

    </div>
    <div class="row" id="row-2">
        <div class="col-xs-3 col-xs-offset-4" id="area"></div>
        <div class="col-xs-2" id="conditions"></div>
        <div class="col-xs-2" id="wind-speed"></div>

    </div>

这是科德芬上的钢笔。

问题似乎是，col-xs-offset-4似乎没有应用于row-2内部的第一个div，即- <div class="col-xs-3 col-xs-offset-4" id="area"></div>。

我做错了什么？

Answer 1

问题是您有以下代码：

#row-2 div {
    background-color: #DFDEDD;
    height: 60px;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

和

#area {
    margin-left: 50px;
}

他们推翻了

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

由引导程序指定的。