(Bootstrap 3,CSS)如何更改小型设备的弹出框宽度?

时间:2014-05-15 10:25:56

标签: css twitter-bootstrap-3

我的.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样式?

2 个答案:

答案 0 :(得分:1)

使用媒体查询:

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

检查Bootstrap docs此事。

答案 1 :(得分:-1)

根据您的要求在媒体查询中写下您的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) {

}