Bootstrap - 2列匹配高度，1与全宽图像，1与文本

Question

我在Bootstrap 3.3.7中难以获取某些内容。小提琴是在这里：https://jsfiddle.net/rrqt9e98/

<div class="container"> 
    <div class="row"> 

    <div class="col-md-6" style="background-color: red;"> 
     <img src="http://placehold.it/500x333"> 
    </div> 

    <div class="col-md-6" style="background-color: yellow;"> 
     <p> 
     Content column 
     </p> 
    </div> 
    </div> 
</div> 

输出是目前这样的：

我想要做的就是我的形象（其中有500 * 333px的原始大小）占据左手栏的整个宽度。我在我的img CSS设置width: 100%实现这一点，下面这里给出的建议是：How do you stretch an image to fill a <div> while keeping the image's aspect-ratio?

我不知道为什么会出现图像后面的红色背景，因为我想要的图像与col-md-6边缘齐平。所以我试着加入：

img { 
    padding: 0; 
    border: 0; 
} 

我也想右手黄色的列来匹配图片的高度。我在我的项目中使用了jQuery Match高度插件，因此可以选择这个插件，除非有一个CSS解决方案。

我想要的整体效果是一个2列布局，其中图像占据了左手边的全部列，右边的列与左边的列的高度相匹配。在移动断点处（sm或更低），我想横向堆叠这两列。

我希望它看起来像这样（我已经在Fireworks中嘲笑了只是为了显示它应该是什么样子）：

请可有人点我在这个正确的方向？

Answer 1

列在引导有排水沟，在左右填充的形式，这就是为什么你看到的红色背景：https://github.com/twbs/bootstrap/blob/v3-dev/dist/css/bootstrap.css#L1615 - 你可以通过删除填充来测试此项，如下所示：https://jsfiddle.net/rrqt9e98/2

而不是尝试让右侧列进行拉伸以填充与左侧相同的高度lumn，只适用于你的颜色到该行来代替：

<div class="container"> 
    <div class="row" style="background-color: yellow;"> 

    <div class="col-md-6 no-gutter" style="background-color: red;"> 
     <img src="http://placehold.it/500x333"> 
    </div> 

    <div class="col-md-6 no-gutter"> 
     <p class="p1"> 
     Content column 
     </p> 
    </div> 
    </div> 
</div> 

有关CSS：

.no-gutter 
{ 
    padding-left: 0; 
    padding-right: 0; 
} 

.p1 
{ 
    padding: 1em; 
} 

小提琴，用一些填充添加到右列中的一段话：https://jsfiddle.net/rrqt9e98/5/

Answer 2

HTML：

<div class="container-fluid"> 
    <div class="row"> 

     <div class="col-md-6 nopadding" style="background-color: red; width:500px"> 
     <img src="http://placehold.it/500x333"> 
     </div> 

     <div class="col-md-6 nopadding" style="background-color: yellow; height:333px"> 
     <p> 
     Content column 
     </p> 
     </div> 
    </div> 
    </div> 

CSS：

.nopadding { 
    padding: 0 !important; 
    margin: 0 !important; 
}