Question

我的.popover使用了CSS：

.popover {
    position:absolute;
    top:0;
    left:0;
    z-index:1010;
    display:none;
    width:400px;
    max-width:600px;
    padding:1px;
    text-align:left;
    white-space:normal;
    border:1px solid #ccc;
    border:1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius:6px;
       -moz-border-radius:6px;
            border-radius:6px;
    -webkit-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
       -moz-box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
            box-shadow:0 5px 10px rgba(0, 0, 0, 0.2);
    -webkit-background-clip:padding-box;
       -moz-background-clip:padding;
            background-clip:padding-box;}

.popover-close {
    color:#FFF;
    font-size:140%;
}

.popover-content a {
    font-size:110%;
}

如何更改小型设备的popover宽度和CSS样式？

Answer 1

使用媒体查询：

@media (max-width: 768px) {
    .popover {
        /* your stiles here */
    }
}

检查Bootstrap docs此事。

Answer 2

根据您的要求在媒体查询中写下您的CSS。

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

（Bootstrap 3，CSS）如何更改小型设备的弹出框宽度？

2 个答案: