Bootstrap "row"类宽度超出问题

最新推荐文章于 2023-10-09 18:25:59 发布

Joan

最新推荐文章于 2023-10-09 18:25:59 发布

阅读量4.8k

点赞数

分类专栏：开发记录文章标签：布局 bootstrap

本文链接：https://blog.csdn.net/cvsuser113/article/details/40890377

版权

开发记录专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题产生原因：

页面用Bootstrap的栅格系统来布局，类col-xs-*左右会有15px的padding，该类下有元素img希望顶边展示，这就需要给col-xs-*类添加额外的样式：padding:0px;

如此做后，该类底下若再有row类，会出现该元素宽度超出父元素宽度。

解决方法：

为后来的row类添加样式：100%；

示例代码：

<div class="row">
    <div class="col-xs-12" style="padding:0px;">
        <img src="@Model.ImgPath" style="width:100%;" />
        <div class="row" style="width：100%">
           <div class="col-xs-5 col-xs-offset-1">
		...
           </div>
        </div>
    </div>
</div>