将文本环绕引导图像

Question

我一直在尝试使用引导程序的网格系统将文本环绕在图像周围以限制图像的宽度。总体布局很像这样。

我目前正在使用

<div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-xs-12 col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div>
        {!! Purifier::clean($blogPost->message) !!}
    </div>
    <div class="col-xs-12">
        <hr />
    </div>
</div>

此代码产生以下布局。

我试过删除第二列，只保留嵌套图像的列。

 <div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="row">
        <div class="col-sm-6">
            <h2>{!!$blogPost->title!!}</h2>
        </div>
        <div class="col-sm-6">
            <h3 class="pull-right">
                {{$blogPost->created_at}}
            </h3>
        </div>
    </div>
    {!! Purifier::clean($blogPost->message) !!}
    <div class="col-xs-12">
        <hr />
    </div>
</div>

这将导致其他意外的文本放置，如此处所示。

我怎样才能达到预期的效果并继续使用引导网格系统来根据视口的大小设置图像的宽度？

原文由 milo526 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

<div class="row">
    <div class="col-xs-12 col-sm-5">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-xs-12 col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div>
    </div>
    {!! Purifier::clean($blogPost->message) !!}
    <div class="col-xs-12">
        <hr />
    </div>
</div>

将标题和 created at 包装在一个新列中以补充图像的宽度并将所有其他文本设置在任何列之外对我来说是个窍门。

一个小的缺点是边距不对齐，但我相信我会使用一些自定义 CSS 找到解决方法。

原文由 milo526 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

@milo526 的答案非常好，行的负边距和文本没有边距只是一个小缺陷。您可以添加一个 div，用边距或填充宽度的一半来包裹文本，或者使用没有浮动的 col-sm-12。另一个小缺陷是图像和文本之间的边距不够，因此您应该向图像添加额外的右填充。我将这些调整置于内联样式中，因此它们是可见的。

 <div class="row">
    <div class="col-sm-5" style="padding-right:30px;">
        <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%">
    </div>
    <div class="col-sm-7">
        <div class="row">
            <div class="col-sm-6">
                <h2>{!!$blogPost->title!!}</h2>
            </div>
            <div class="col-sm-6">
                <h3 class="pull-right">
                    {{$blogPost->created_at}}
                </h3>
            </div>
        </div>
    </div>
    <div class="col-sm-12" style="float: none;">
      {!! Purifier::clean($blogPost->message) !!}
    </div>
    <div class="col-sm-12">
        <hr />
    </div>
</div>

https://codepen.io/davdenic/pen/bPGRqa

原文由 drinkAcoffee 发布，翻译遵循 CC BY-SA 4.0 许可协议