Question

我确信我做错了事，我今天早上试图解决这个问题。

这是交易，我正在尝试构建一个自适应HTML页面，它将具有您在下面看到的图片的行为：

所以我告诉自己，对于必须移动的元素，如下面的元素＆＃34; Besoin d＆＃39; un devis＆＃34;等，我将使用boostrap网格，并用于WYSIWIG发电机。但相反，当我尝试调整窗口大小时，会发生什么：

不调整窗口大小 - 正常行为：

当我调整窗口大小时，我尝试测试boostrap网格：

我在互联网上上传了一个测试版本，以便您可以看到我的问题。 http://test-stackoverflow.co.nf

如果您需要代码，我会提供。我只是不知道如何提供一个完整的测试网站＆＃34;和堆栈中的这种情况。

Answer 1

您的问题是您在第110行使用了课程container而不是container-fluid。container具有固定的宽度，当您减小浏览器宽度时，它保持不变并溢出其父元素。 container-fluid的宽度为100％，因此它会填充您的父元素。然后，您还必须使图像适应100％宽度（相对于col-3）和适当的高度。

修改 .container没有固定的宽度，但是.container-main#由于其相对宽度而立即开始缩小，而.container缩小，直到您的浏览器窗口达到1200px宽度或更低。

Answer 2

<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>

试试这个

Answer 3

您的.container课程设置为970px。将其设置为100％。同时将.col-sm-3更改为.col-sm-4。为什么？那么你有3个项目，网格系统存在12个，12/3 = 4个。

同时将图像宽度设置为100％以防止重叠。

Answer 4

我相信你在这里覆盖了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;
}

将覆盖该列的宽度。

删除宽度样式，它应该按预期工作。如果需要其他帮助，请发表评论。

Bootstrap网格不适合我的主容器

4 个答案: