使用 bootstrap 3 在 767px、991px、1199px 处分页
web page breaks at 767px, 991px, 1199px using bootstrap 3
我正在做一个项目,我的网页在 767px、991px 和 1199px 处中断,我不知道为什么会这样。我正在使用 bootstrap 3.3.7 并且在我的项目中使用 hidden-*
classed 的地方中间有一个图像并且左右还有另外两列,我遇到了这个问题.现在我不知道是因为 hidden-*
类 还是在中间栏放了一张图片。如果您不明白我的意思,请查看这些代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<div id="#id">
<div class="container-fluid">
<div class="row">
<div class="section-2">
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
<ul>
<li class="fade-in-skills slide-in-skills">text</li>
<li class="fade-in-skills slide-in-skills">text</li>
</ul>
</div>
<div id="logo-header" class="col-lg-2 hidden-md hidden-sm hidden-xs">
<img src="MyImageSrc" width="320" height="600">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
<ul>
<li class="fade-in-skills slide-in-skills">text</li>
<li class="fade-in-skills slide-in-skills">text</li>
</ul>
</div>
</div>
</div>
</div>
</div>
我的css:
#id{
background: rgba(168, 198, 222, .2);
margin: 100px 50px 0;
border-radius: 300px 15px 300px 15px;
padding: 20px;
}
.section-2 ul {
list-style: none;
text-align: center;
}
.section-2 ul li {
margin: 50px auto 0;
opacity: 0;
font-size: 1.6rem;
}
.section-2-right, .section-2-left ul li:last-child {
margin-bottom: 50px;
}
.section-2 img{
margin: 50px auto;
display: block;
}
请记住,这只会发生在上面提到的那些特定像素上。例如,768px 或 766px 没有问题等等......这对我来说很奇怪。
我很感激任何帮助。
我建议您检查项目中应用的媒体查询。
因为,这显然是您项目中设置的媒体查询的问题。
我们通常遵循移动优先设计或桌面优先设计。
在bootstrap,通常是移动优先设计。您可以检查这些断点并按照下面的 bootstrap 文档应用它们。
只是加断点的时候好像用错了
举个例子:
假设一个媒体查询是为平板设备编写的,它看起来像:
@media and (min-width:768px) and (max-width:991px){ // Notice max-width is 991px and not 992px
// Your CSS selectors
}
现在,注意max-width:991px
,所以,有可能是这里写了992px
,在设置media query或者类似的小问题。
注意:我根据我在之前项目中的经验分享这个建议,我们使用的是 ReactStrap,我注意到媒体查询没有按照 min 的正确约定设置和最大宽度。
它不能正常工作的原因是因为在我的项目中使用了 hidden-*
Bootstrap-3 预定义 类。
所以我决定删除它们,而不是使用 CSS 媒体查询,它没有任何副作用,不像越野车,有风险 Bootstrap 类 和他们的网格系统像这种情况在某些时候可能会是个大麻烦。
所以最后我的代码从你上面看到的变成了这个:
@media (max-width: 265px) {
#logo-header {
display: none;
}
}
请记住,我们不再需要那些 hidden-*
类。
这样你实际上可以选择你的布局应该改变什么屏幕尺寸,你有更多的自由,你也不会遇到这个问题。只需使用 CSS 媒体查询,一切都会好起来的。
我正在做一个项目,我的网页在 767px、991px 和 1199px 处中断,我不知道为什么会这样。我正在使用 bootstrap 3.3.7 并且在我的项目中使用 hidden-*
classed 的地方中间有一个图像并且左右还有另外两列,我遇到了这个问题.现在我不知道是因为 hidden-*
类 还是在中间栏放了一张图片。如果您不明白我的意思,请查看这些代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<div id="#id">
<div class="container-fluid">
<div class="row">
<div class="section-2">
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-left">
<ul>
<li class="fade-in-skills slide-in-skills">text</li>
<li class="fade-in-skills slide-in-skills">text</li>
</ul>
</div>
<div id="logo-header" class="col-lg-2 hidden-md hidden-sm hidden-xs">
<img src="MyImageSrc" width="320" height="600">
</div>
<div class="col-lg-5 col-md-6 col-sm-6 col-xs-12 section-2-right">
<ul>
<li class="fade-in-skills slide-in-skills">text</li>
<li class="fade-in-skills slide-in-skills">text</li>
</ul>
</div>
</div>
</div>
</div>
</div>
我的css:
#id{
background: rgba(168, 198, 222, .2);
margin: 100px 50px 0;
border-radius: 300px 15px 300px 15px;
padding: 20px;
}
.section-2 ul {
list-style: none;
text-align: center;
}
.section-2 ul li {
margin: 50px auto 0;
opacity: 0;
font-size: 1.6rem;
}
.section-2-right, .section-2-left ul li:last-child {
margin-bottom: 50px;
}
.section-2 img{
margin: 50px auto;
display: block;
}
请记住,这只会发生在上面提到的那些特定像素上。例如,768px 或 766px 没有问题等等......这对我来说很奇怪。 我很感激任何帮助。
我建议您检查项目中应用的媒体查询。 因为,这显然是您项目中设置的媒体查询的问题。
我们通常遵循移动优先设计或桌面优先设计。 在bootstrap,通常是移动优先设计。您可以检查这些断点并按照下面的 bootstrap 文档应用它们。
只是加断点的时候好像用错了
举个例子:
假设一个媒体查询是为平板设备编写的,它看起来像:
@media and (min-width:768px) and (max-width:991px){ // Notice max-width is 991px and not 992px
// Your CSS selectors
}
现在,注意max-width:991px
,所以,有可能是这里写了992px
,在设置media query或者类似的小问题。
注意:我根据我在之前项目中的经验分享这个建议,我们使用的是 ReactStrap,我注意到媒体查询没有按照 min 的正确约定设置和最大宽度。
它不能正常工作的原因是因为在我的项目中使用了 hidden-*
Bootstrap-3 预定义 类。
所以我决定删除它们,而不是使用 CSS 媒体查询,它没有任何副作用,不像越野车,有风险 Bootstrap 类 和他们的网格系统像这种情况在某些时候可能会是个大麻烦。
所以最后我的代码从你上面看到的变成了这个:
@media (max-width: 265px) {
#logo-header {
display: none;
}
}
请记住,我们不再需要那些 hidden-*
类。
这样你实际上可以选择你的布局应该改变什么屏幕尺寸,你有更多的自由,你也不会遇到这个问题。只需使用 CSS 媒体查询,一切都会好起来的。