引导容器网格不是全宽

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>

演示