html - Bootstrap 列在调整大小时重叠

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 sample here ，如果您减小文本与图像重叠的宽度。

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

有什么建议吗？

Answer 1

问题不在于 Bootstrap 列，而在于列内的图像。图片应具有以下属性:

max-width: 100%;
height: auto;

为了让它在较小的屏幕上调整大小，否则它只会超出列宽。