引导列在调整大小时重叠

Question

我意识到这是一个常见的问题，但我已经检查了其他类似问题中提出的问题，没有找到答案

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6">
      <img style="width: 550px; height: 370px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4">
       <h2>Big Title Here</h2>
       <p>Text in sentances here. Text in sentances here. Text in sentances here.</p>
       <p>Text in sentances here. Text in sentances here. Text in sentances here.</p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-2">
       <img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
       <img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
       <img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-4">
        <h2>Subtitle 1</h2>
        <p>Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. </p>
        <p>
        <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
        </p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4">
        <h2>Subtitle 2</h2>
        <p>Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here.</p>
        <p>
        <a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
        </p>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4">
        <h2>Subtitle 3</h2>
        <p>Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here. Text in sentances here.</p>
        <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
        </p>
    </div>
  </div>
</div>

我已经在这里创建了一个Bootply样本，如果你减少宽度，文字重叠的图像。

我的md列加起来是12，我没有混淆sm和md。

有什么建议吗?

Answer 1

问题不在于引导列，而在于列内的图像。图像应该有一个属性:

max-width: 100%;
height: auto;

以便在较小的屏幕上调整大小，否则它就会超出列宽。