将文字环绕在引导图像上 [英] Wrap text around bootstrap image

问题描述

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

I have been trying to wrap text around an image using bootstrap's grid system to limit the width of the image. The general layout would be a lot like this.

我当前正在使用

<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>

此代码将导致以下布局.

This code results in the following layout.

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

I have tried removing the second column and only keeping the column in which the image is nested.

<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>

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

This will result in other unexpected text placement as can be seen here.

如何获得所需的效果，并继续使用自举网格系统根据视口的大小设置图像的宽度?

How can I achieve the desired effect and keep using the bootstrap grid system to set the width of my image in regards to the size of the viewport?

推荐答案

<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来解决此问题.

Wrapping the title and created at date in a new column to compliment the width of the image and setting all the other text outside any column did the trick for me.
A small downside is that the margins don't line up but I am sure I'll find a fix for that using some custom CSS.

这篇关于将文字环绕在引导图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！