bootstrap容器网格不是全宽

Question

我的引导网格容器不是全宽。见图：

容器只位于顶部。

这是代码：

HTML：

<div class="container" style="width:100%">
    <div id="my-row" class="row" style="width:100%">
        <div class="col-sm-4 panel" style="background-color: red">
            <h4 class="white light" style="margin-top:0px; padding: 20px 0px 0px 20px; float: left;">WHAT WE GROW</h4>
        </div>
        <div class="col-sm-4 panel " style="background-color: yellow ">
        </div>
        <div class="col-sm-4 panel " style="background-color: blue ">
            <h4 class="white light " style="margin-top:0px; padding: 20px 20px 0px 0px; float: right; color: pink; ">SIGN UP FREE</h4>
        </div>
    </div>
</div>

CSS：

#my-row {
    display: table;
    height:20%;
}

#my-row .panel {
    float: none;
    display: table-cell;
    vertical-align: top;
}

如何让容器达到整个宽度？

Answer 1

首先使用：.container-fluid表示全宽，如果您使用它，则无需添加style="width:100%"。

其次，删除边距并为行添加全宽：

#my-row {
    display: table;
    height:20%;
    width: 100%;
    margin: 0;
}

从容器液中移除填充物：

.no-padding {
    padding: 0 !important;
}

答案：

<div class="container-fluid no-padding">

</div>

https://jsfiddle.net/pg2kwk5e/11/

Answer 2

您只需从width:100%元素中删除#my-row。

DEMO

Answer 3

您应该使用container类，而不是使用container-fluid类。
这使得div的宽度为100％。

如果您确实想使用container，可以在将宽度设置为100％后添加!important。这将覆盖正常的引导程序样式。但我不推荐这个。

Answer 4

将以下css添加到.container类..

padding-left: 0;
padding-right: 0;

将以下css添加到#my-row ID ..

margin-left: 0;
margin-right: 0;

在jsfiddle

上查看我的实时演示