Question

具有红色（左）列和蓝色（右）列的响应式网站。红色列有一个带margin-top:30px

的黑色元素

当网站调整大小并且蓝色列在红色列下跳转时，红色列＆＃34;继承＆＃34; margin-top ..如何避免这种情况？

http://www.bluemachines.dk/_bootstrap/downsize/

Answer 1

这是由于Bootstrap中使用的媒体查询！

您需要了解媒体查询，或者您不需要媒体查询！不要在导航中使用Bootstrap类！

将它放入@media（最小宽度：768px）和（最大宽度：979px），它完美无缺。

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}   
.navbar .btn-navbar {
    display: none;
}

或

您还可以通过更改来停止堆叠导航栏 @ grid-float-breakpoint变量为1px

或

媒体查询适用于移动设备的浏览器宽度您还可以在媒体查询css中指定您的样式

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

以下是disabling media queries

的链接

Answer 2

试试这个：

    <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4">
              Your Content
    </div>
    <div class="col-md-8 col-lg-8 col-xs-8 col-sm-8">
              Your Content
    </div>

为所有屏幕尺寸提供课程，解决问题!!!!

缩小宽度和边距顶部

2 个答案: