bootstrap4中左右布局时自定义宽度的方法

鸿硕最近在开发商城网站,看中了一种布局比较美观,于是就研究了一下,最终的实现效果,先上图,如下:

实现这种布局通常使用的方式为:
直接bootstrap左右栅格布局,右侧再来一个子栅格布局就行了。

<div class="container">

<div class="row">

<div class= "left col-md-2"> <img src=""> </div>

<div class="right col-md-10">

<div class="container">

<div class="row">

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</div>

</div>

</div>

</div>

如果左边的col-md-2也就是两个栅格的宽度刚好符合您的要求,这样就直接按上面的代码实现就可以了,如果感觉左边的col-md-2宽度不合适,例如col-md-2窄了,而col-md-3又宽了,怎么办呢?

要解决这个问题,有两种方法:
一,使用bootstrap4自带的功能来实现,比如添加属性 w-20,w-80来实现,这里需要结合使用col-*-*来使用
参考代码如下:

这里注意w-20和col-*的优先级问题,如果col-md-12这种情况,col-md-12的优先级更高;如果col-md这种情况,w-20的优先级更高;
具体使用根据不同的场景来灵活使用即可。

二,直接给左侧边栏的宽度设定固定值,右侧边栏宽度为(100%-左侧边栏固定值)

以上就是实现左右布局自定义尺寸的方法,如有更好的方法,欢迎交流

如果哪位朋友知道的话,欢迎指点交流。
也可以加群讨论: IT互联网交流656992002

给TA打赏
共{{data.count}}人
人已打赏
建站知识

商城网站建设这些细节你掌握了吗?

2019-4-10 8:31:06

bootstrap

bootstrap4修改默认轮播时间间隔的方法

2021-9-30 10:45:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索