html – 在bootstrap图像周围换行文本

概述我一直在尝试使用bootstrap的网格系统在图像周围包装文本以限制图像的宽度. 总体布局很像这样. 我目前正在使用 <div class="row"> <div class="col-xs-12 col-sm-5"> <img class="img-responsive" src="{{$blogPost->getImagePath()}}" width="100%"> 我一直在尝试使用bootstrap的网格系统在图像周围包装文本以限制图像的宽度.
总体布局很像这样.

我目前正在使用

<div >    <div >        <img  src="{{$blogPost->getimagePath()}}" wIDth="100%">    </div>    <div >        <div >            <div >                <h2>{!!$blogPost->Title!!}</h2>            </div>            <div >                <h3 >                    {{$blogPost->created_at}}                </h3>            </div>        </div>          {!! PurifIEr::clean($blogPost->message) !!}    </div>    <div >        <hr />    </div></div>

此代码导致以下布局.

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

<div >    <div >        <img  src="{{$blogPost->getimagePath()}}" wIDth="100%">    </div>    <div >        <div >            <h2>{!!$blogPost->Title!!}</h2>        </div>        <div >            <h3 >                {{$blogPost->created_at}}            </h3>        </div>    </div>      {!! PurifIEr::clean($blogPost->message) !!}    <div >        <hr />    </div></div>

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

如何实现所需效果并继续使用引导网格系统来设置视图大小的图像宽度？

解决方法

<div >    <div >        <img  src="{{$blogPost->getimagePath()}}" wIDth="100%">    </div>    <div >        <div >            <div >                <h2>{!!$blogPost->Title!!}</h2>            </div>            <div >                <h3 >                    {{$blogPost->created_at}}                </h3>            </div>        </div>     </div>    {!! PurifIEr::clean($blogPost->message) !!}    <div >        <hr />    </div></div>

在新列中包装标题并在日期创建以补充图像的宽度并将任何列外的所有其他文本设置为我.
一个小的缺点是边距不排队,但我相信我会找到一个修复使用一些自定义CSS.

@H_301_44@ 总结

以上是内存溢出为你收集整理的html – 在bootstrap图像周围换行文本全部内容，希望文章能够帮你解决html – 在bootstrap图像周围换行文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。