<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
html - Bootstrap 3 媒体查询 : Breakpoint occuring at odd dimensions
我是 Bootstrap 和媒体查询方面的业余开发人员。
我正在尝试通过轻微的自定义使 Bootstrapped 网站的导航栏响应。调整浏览器大小时遇到问题。
在正常尺寸下，网站看起来像这样:
但是，在 1130 像素处有一个断点(非常奇数？为什么!)，导航栏如下所示:
如您所见，导航栏的宽度加倍，用户图标移到下一行。
当我们进一步缩小尺寸时，导航栏保持这样直到 1005px:
下一个断点在 1004px，当搜索框来到最左边时:
直到 960px 都是这样:
在 959px 处，设计再次更改 CSS:
在 881 像素处，设计保持相同的 CSS:
CSS 在 880px 处再次发生变化:
直到最终到达 767px 处的最后一个断点，之后站点保持不变:
我不明白为什么在 1130px、1004px、959px 和 880px 上会有如此尴尬的元素位移。
我应该怎么做:
在 1130 像素处，用户图标不会溢出到下一行？
从 960px 到 1004px，搜索栏和用户图标不会移位到下一行。
在 880 像素时，用户图标不会移到下一行。
我希望搜索栏和用户图标始终与 Logo 保持一致。我该如何实现？
如果有人能忍受痛苦并告诉我为什么断裂发生在如此奇数的地方，我会很高兴。
这是在 styles.css 中编写的以下媒体查询:
@media (min-width: 320px) {
.navbar-brand {
margin-left: 0px;
}
}
@media (min-width: 640px) {
.navbar-brand {
margin-left: 0px;
}
}
@media(min-width:960px) {
.navbar-brand {
margin-left: 250px;
}
}
最佳答案
将您的媒体查询更改为此，它将起作用
@media (min-width: 320px) {
.navbar-brand {
margin-left: 0px;
}
}
@media (min-width: 640px) and (max-width: 880px){
.navbar-brand {
margin-left: 5px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 10px;
}
.navbar-nav>li>a {
padding: 30px 5px !important;
}
.navbar-nav{
margin-left:5px;
}
}
@media(min-width:960px) {
.navbar-brand {
margin-left: 120px;
}
.navbar-nav.navbar-right:last-child {
margin-right: 30px;
}
.navbar-default .navbar-nav>li>a {
padding: 30px 15px !important;
}
}
关于html - Bootstrap 3 媒体查询 : Breakpoint occuring at odd dimensions，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25227813/