css - 我的 Bootstrap 样式不会呈现我的移动样式

Question

我的 bootstrap 移动样式不会渲染，除非我在末尾添加一个额外的右括号有人能告诉我我做错了什么吗

这是我创建的样式，它们应该可以工作，但没有工作，但它们通过了验证器测试。

@media only screen and (max-width: 766px){

.movie{
        width:300px;

        height: 300px;
        margin:0;
        padding:0;
    }
    body > div > div > h3 {
margin-left: 300px;
padding-top: 200px;
}
a:link {
outline: 0;
font-size: 9px;
display: block;
padding-right: 50px;
}
h3{
font-size: 20px;
    margin-top:20%;
}
h3.port {
margin-left: 150px;
color: #9932CC;
margin-top: 50px;
}

img {
    float: left;
    margin-right: 15px;
    width:50%;
    height:50%;
    margin-top:0;
}

p {
  margin-left: 10px;
  margin-top:5%;
  padding: 0;
  color: #9932CC;
  font-size: 15px;
}
.navbar .nav > li > a {
    color: #9932CC;
     }
body > div > div > a > img {
display: none;
}
.navbar-brand {
float: left;
padding: 10px 15px;
font-size: 20px;
}

     /* twitter
    ====================================== */
    div#iPhone {background: url("../images/iphone.png") no-repeat;
    width:275px;height:500px;
display: inline-block;  
padding-top: 90px;
padding-left:2em;
margin-left: 0px;


}

    iframe#twitter-widget-0.twitter-timeline[style] {width:70px !important;}

    div#iPhone iframe[id^="twitter-widget-0"] {min-width:170px !important;
    margin-right: 20px;
    }
        /* iframe
    ======================================= */
    .movie {
text-align: center;
width: 350px;
height: 345px;
margin-left: 0px;
margin-right: 200px;
}
    .paragraph {
width: 50px;
margin-left: 10%;
}
    .thumbnail {

color: #333;
margin-left: 100%;
width: 100%;
background-color: transparent;
        border:0px;
}
    .btn-primary {
color: #000;
background-color: #aff6b8;
border-color:black;
    margin-top: 5%;
    width:100%;
}
}

Answer 1

mobile style won't render unless I add a extra closing brace to the end

是的，@media 语法涉及一组额外的大括号:

@media only screen and (max-width: 766px) {
    element {}
}

您添加的最后一个右大括号等同于上面代码中的最后一个。