背景颜色与Bootstrap

Question

我似乎遇到了在Bootstrap中排成一行背景颜色的问题。我希望第二个占位符框右侧的背景为纯色，但现在它考虑了额外的填充，并且它没有正确对齐。目前，背景颜色超出主标题图像。

有什么建议吗？你需要在JSFiddle中扩展页面的宽度，看看我在说什么。

JS小提琴：http://jsfiddle.net/aukme1mb/

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <img class="img-responsive" src="http://placehold.it/1140x360">
        </div>
    </div>
    <div class="row bg">
        <div class="col-md-5">
            <img class="img-responsive" src="http://placehold.it/458x304">
        </div>
        <div class="col-md-7">
            <p>Text here</p>
        </div>
    </div>
</div>

body {
    background-color: #f0f0f1;
}
.bg {
    background-color: #cbede7;
}       

Answer 1

p_buffer

Answer 2

从左栏中删除右边的填充

.bg {
    background-color: #cbede7;
    margin:0;
}

编辑：基本上，您想要在<style> .bg { background-color: #cbede7; } .no-pad-right { padding-right: 0 } </style> <div class="container"> <div class="row bg"> <div class="col-md-5 no-pad-right"> <img class="img-responsive" src="http://placehold.it/458x304"> </div> <div class="col-md-7"> <p>Text here</p> </div> </div> </div> 和col-md-7 div上使用填充，以获得您想要的内容。

此外，还有一个名为col-md-5的精美JavaScript解决方案，它将每个列与特定类匹配到该类的最高列 - 这将完全适合您的情况。

＆＃34; matchHeight使所有选定元素的高度完全相等。它处理许多边缘情况，导致类似的插件失败。＆＃34;

https://github.com/liabru/jquery-match-height

Answer 3

您要删除从col-md-5列中删除左侧填充。

http://jsfiddle.net/aukme1mb/9/

我还注意到你可能想在较小的屏幕上调整正确的填充。