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

Question

我正在使用最新的 Bootstrap 和 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 -->

少:

#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

对我来说，在较小的分辨率下，您的文字看起来会缩小，但您的图像大小却保持不变，因为文字试图通过缩小为自己腾出空间。

您可以尝试在 img 标签上使用 img-responsive class

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

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

Answer 2

通常您会换行文本并设置左边距。在这种情况下，大约 270px。

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

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

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

How to avoid text break of paragraph next to floated image while preserving responsiveness?

html

css

less

twitter-bootstrap