我一直在尝试使用bootstrap的网格系统在图像周围包装文本以限制图像的宽度.
总体布局很像这样.
总体布局很像这样.
我目前正在使用
<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>
如何实现所需效果并继续使用引导网格系统来设置视图大小的图像宽度?
解决方法
<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>
在新列中包装标题并在日期创建以补充图像的宽度并将任何列外的所有其他文本设置为我.
一个小的缺点是边距不排队,但我相信我会找到一个修复使用一些自定义CSS.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。