Question

我正在制作天气应用。我有两行描述当前的当地天气状况，而且由于我使用了bootstrap的网格系统，我需要使用offset来（有些）使页面上的列居中。 / p>

我有两个row，ID为row-1和row-2。当我将row-1应用于其中的offset时，行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>

这就是Codepen上的笔。

问题似乎是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%;
}

由bootstrap指定。

在bootstrap中偏移列不适用于第二行

1 个答案: