Html 引导网格不'；我的主容器装不下

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

这里的交易，我正试图建立一个响应HTML页面，这将有你看到的图片下面的行为：

所以我告诉自己，对于那些必须移动的元素，比如“Besoin d'un design”下面的元素，我将使用boostrap网格，并使用WYSIWIG生成器。但是，当我尝试调整窗口大小时，会发生以下情况：

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

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

我在网上上传了一个测试版本，你可以看到我的问题。

---

如果你需要代码，我会提供。我只是不知道如何在堆栈中提供一个完整的“测试网站”和这样的案例。

您的

。container

类设置为970px。设置为100%。同时将

.col-sm-3

更改为

.col-sm-4

。为什么？你有3个项目，12个网格系统中有12个，12/3=4个

---

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

您的

。容器类设置为970px。设置为100%。同时将
.col-sm-3
更改为
.col-sm-4
。为什么？你有3个项目，12个网格系统中有12个，12/3=4个

另外，将图像宽度设置为100%以防止重叠。
您的问题是，您使用了class
container
，而不是第110行中的
container fluid
<代码>容器

具有固定的宽度，当您减小浏览器宽度时，它保持不变并溢出其父元素<代码>容器流体的宽度为100%，因此它将填充父元素。 然后，您还必须将图像调整为100%宽度（相对于col-3）和适当的高度

编辑：

---

.container

没有固定的宽度，但是您的

.container main#

由于其相对宽度而立即开始收缩，而.container直到您的浏览器窗口达到1200px或更小的宽度时才会收缩。

您的问题是在第110行中使用了class

container

而不是

container fluid

<代码>容器具有固定的宽度，当您减小浏览器宽度时，它保持不变并溢出其父元素<代码>容器流体的宽度为100%，因此它将填充父元素。

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

然后，您还必须将图像调整为100%宽度（相对于col-3）和适当的高度

编辑：

.container

没有固定的宽度，但是您的

.container main#

由于其相对宽度而立即开始收缩，而.container直到您的浏览器窗口达到或小于1200px宽度时才会收缩。

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

自动的
住所
圣埃

试试这个

自动的
住所
圣埃

---

试试这个

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

将覆盖该列的宽度

---

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

我相信您正在覆盖引导的网格系统：

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

将覆盖该列的宽度

---

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

如果我修改.container类，我想我会删除bootrap网格行为。.我错了吗？您可以创建自己的

.container

类，然后您将覆盖这些属性。您还可以创建另一个名为

.special

的类或其他什么类，并将

宽度设置为100%。我现在按照您的建议做了，但仍然，我得到了相同的结果。如果要将宽度设置为100%，您甚至不需要
.container
，如果仍设置为
display:block
，则默认情况下，
div
将执行此操作。如果修改.container类，我想我会删除bootrap网格行为。我错了吗？您可以创建自己的
.container
类，然后覆盖这些属性。您还可以创建另一个名为
.special
的类或其他什么类，并将
宽度设置为100%。我现在按照您的建议做了，但仍然，我得到了同样的结果。你甚至不需要
。如果你要将宽度设置为100%，那么container
，如果仍然设置为
display:block
，默认情况下
div
会这样做。我使用了一个生成器（web生成器）生成引导网格..这就是为什么我不知道容器类有问题..我使用生成器（web生成器）生成引导网格..这就是为什么我不知道容器类有问题..是的，但是在这种情况下，正方形看起来是这样的：……你删除了高度样式吗？啊，是的。对不起，我的错。我现在重试了，但仍然不起作用。我真的不知道我做错了什么。与其尝试使用引导友好的标记，不如尝试这样包装它，让我知道会发生什么。将任何边框样式添加到第三级。例如：div class=“col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2边框样式”>是的，但在这种情况下，正方形将如下所示：……是否删除了高度样式？啊，是的。对不起，我的错。我现在重试了，但仍然不起作用。我真的不知道我做错了什么。与其尝试使用引导友好的标记，不如尝试这样包装它，让我知道会发生什么。将任何边框样式添加到第三级。即：div class=“col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2边框样式”>