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%-左侧边栏固定值)

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

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

人已赞赏
wordpress教程

WordPress使用wp_enqueue_scripts钩子引用css ,js 文件,去除链接后面所带的版本号的方法

2021-7-30 15:17:40

IT百科

使用QQ截图保存的文件,去掉文件名称中”QQ截图“字符

2021-2-12 10:50:11

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