如何在保持响应性的同时避免浮动图像旁边的段落文本中断？

Question

我正在使用最新的Bootstrap with LESS。

我已经构建了一个文章网格，其中包含一个浮动到左侧和旁边的图像的段落：

HTML：

<!-- featured articles -->
    <div id="featured-articles" class="container">


      <!-- row -->
      <div class="row">

        <div class="col-md-6">

          <img src="http://placehold.it/265x150">

          <h4>Article Header</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex... <a href="#">Read More</a></p>

        </div>


        <div class="col-md-6">

          <img src="http://placehold.it/265x150">

          <h4>Article Header</h4>

          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex... <a href="#">Read More</a></p>

        </div>

      </div><!-- row -->

</div><!-- /featured articles -->

LESS：

#featured-articles {


    padding-bottom: 25px;

    img {
        display: block;
        margin: 0 auto;
        padding-bottom: 15px;
        clear: both;
    }

    p {
        text-align: justify;
    }

    h4 {
        margin-top: 0px;
    }


    @media (min-width: @screen-sm-min) {

        img {
            float: left;
            padding-right: 10px;
            padding-bottom: 0px;
        }

        .col-md-6 {
            padding-bottom: 25px;
            margin-bottom: 25px;
        }

    }

}

现在的问题是，在某些较小的分辨率上，右边的文字开始破坏而不是保持段落的对齐：

有没有办法让文字很好地保持对齐而不是在保持响应的同时破坏？

Answer 1

通常你会将文字换行并设置左边距。在这种情况下约270px。

p {
    text-align: justify;
    margin-left: 270px;
}

这是一个例子： http://jsfiddle.net/f7ohrLrs/

Answer 2

对我而言，在较小的分辨率下，您的文字缩小，但图像尺寸保持不变，因为文本试图通过下降为自己腾出空间。

您可以尝试在img-responsive代码

上使用img课程

<img src="..." class="img-responsive" alt="Responsive image">

了解更多信息：http://getbootstrap.com/css/#images