Bootstrap网格不适合我的主容器

时间:2016-01-19 14:38:06

标签: html css twitter-bootstrap

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

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

enter image description here

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

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

enter image description here

当我调整窗口大小时,我尝试测试boostrap网格:

enter image description here

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

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

4 个答案:

答案 0 :(得分:2)

您的问题是您在第110行使用了课程container而不是container-fluidcontainer具有固定的宽度,当您减小浏览器宽度时,它保持不变并溢出其父元素。 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;
}

将覆盖该列的宽度。

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