我确信我做错了事,我今天早上试图解决这个问题。
这是交易,我正在尝试构建一个自适应HTML页面,它将具有您在下面看到的图片的行为:
所以我告诉自己,对于必须移动的元素,如下面的元素" Besoin d' un devis"等,我将使用boostrap网格,并用于WYSIWIG发电机。但相反,当我尝试调整窗口大小时,会发生什么:
不调整窗口大小 - 正常行为:
当我调整窗口大小时,我尝试测试boostrap网格:
我在互联网上上传了一个测试版本,以便您可以看到我的问题。 http://test-stackoverflow.co.nf
如果您需要代码,我会提供。我只是不知道如何提供一个完整的测试网站"和堆栈中的这种情况。
答案 0 :(得分:2)
您的问题是您在第110行使用了课程container
而不是container-fluid
。container
具有固定的宽度,当您减小浏览器宽度时,它保持不变并溢出其父元素。 container-fluid
的宽度为100%,因此它会填充您的父元素。
然后,您还必须使图像适应100%宽度(相对于col-3)和适当的高度。
修改强>
.container
没有固定的宽度,但是.container-main#
由于其相对宽度而立即开始缩小,而.container缩小,直到您的浏览器窗口达到1200px宽度或更低。
答案 1 :(得分:1)
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2">
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2">
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2">
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>
试试这个
答案 2 :(得分:0)
您的.container
课程设置为970px。将其设置为100%。同时将.col-sm-3
更改为.col-sm-4
。为什么?那么你有3个项目,网格系统存在12个,12/3 = 4个。
同时将图像宽度设置为100%以防止重叠。
答案 3 :(得分:0)
我相信你在这里覆盖了Bootstrap的网格系统:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2">
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2">
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2">
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>
因此,列已设置,但在此处设置了大小为2的样式:
.content_block.size_2 {
height: 200px;
width: 280px;
}
将覆盖该列的宽度。
删除宽度样式,它应该按预期工作。如果需要其他帮助,请发表评论。