【发布时间】：2018-05-12 04:16:19
【问题描述】：
我想使用 bootstrap 创建一个网站。菜单一切正常，我为最大宽度编写了代码：480px、320px 和 768px。因此，将为移动设备显示菜单。但是当我尝试将相同的代码添加到 @media only 屏幕和（最大宽度：991px）（我也想要这些设备的移动菜单）时，它不起作用。实际上，有些部分似乎已经根据样式进行了更改，但整体菜单与 480px 的菜单不同。
好的，这是我所有最大宽度的 css：480px、320px、768px
@media only screen and (max-width : 768px) {
nav{
height: 50px;
line-height:50px;
background-color: #2f334d;
position: fixed;
}
.navHeader{
background-color: #24254d;
}
.line{
display: none;
}
.logo{
padding-top:15px;
}
.menu_btn{
padding:0;
}
#top_menu{
background-color: #31344e;
}
.menu li{
padding: 10px 0;
display: block;
text-align: center;
border-bottom: 1px solid white;
}
.title{
font-size: 35px;
}
}
【问题讨论】：
-
您需要提供代码，并指定您使用的引导程序版本。
-
代码在那里。引导程序 3
-
@jack_snipe 这没有多大意义。为什么要为 480px、320px、768px 定义相同的 CSS？为 768px 定义一次与您现在所做的相同，因为 768px 以下的所有内容都将使用这些样式。也许包括你的完整 CSS。
-
好吧，我删除了其他人，现在只有 768px。它可以工作，但可以说当我想为 991 或 992 或其他任何内容添加它时，它的工作原理如第二张图片所示。
-
@jack_snipe Bootstrap 3 使用“移动优先”的方法，这意味着您可以从最小的屏幕到最大的屏幕工作。改用“最小宽度：768px”的媒体，它也适用于更宽的屏幕尺寸。无论如何使用媒体查询作为最后的手段，引导程序提供诸如“col-sm/col-md ...”之类的类，以在不同的屏幕尺寸下提供不同的行为。
标签： html css twitter-bootstrap menu responsive-design