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

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

max-width: 100%;
height: auto;

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

Bootstrap Columns调整大小时重叠

1 个答案: