Bootstrap 移动响应式

Question

我正在尝试在 Bootstrap CSS 中创建一个移动响应式网站。

但是，当我尝试调整页面大小时，按钮没有响应（因为它们不会调整大小）。

这是 CSS：

@media (min-width: 320px) and (max-width: 568px) {
    #button1, #dropdown1, #dropdownMenu1 {
        width: 50px;
        text-align: left;
    }
}

#button1, #dropdown1, #dropdownMenu1 {
    width: 120px;
    text-align: left;
}

#button2, #dropdown2, #dropdownMenu2 {
    min-width: 120px;
    text-align: left;
}

这是JSFiddle。

Answer 1

您的代码一切正常。只需在 CSS 末尾编写媒体查询即可。

修改后的代码如下所示。

#button1, #dropdown1, #dropdownMenu1 {
    width: 120px;
    text-align: left;
}
#button2, #dropdown2, #dropdownMenu2 {
    min-width: 120px;
    text-align: left;
}
.caret {
    float: right;
    position: relative;
    top: 8px;
}
@media (min-width: 320px) and (max-width: 568px) {
    #button1, #dropdown1, #dropdownMenu1 {
        width: 50px;
        text-align: left;
    }
}

这是工作的JSFiddle.