Bootstrap格栅自动宽度问题!

发布于 2022-08-28 12:48:49 字数 344 浏览 8 评论 0

本人在row下设了两列:col-md-8 和 col-md-4 ,col-md-8用于放文章内容,col-md-4用于放sidebar,但是问题来了,如果在网站后台设置不显示sidebar,文章内容宽度还是col-md-8的宽度,右侧会空出一大块,有什么方法可以让文章内容的宽度自动最大化,也就是达到col-md-12的宽度!
谢谢大家!
代码如下:

<div class="row">
    <div class="col-md-8">
    </div>
    <div class="col-md-4">
    </div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

嘿嘿嘿 2022-09-04 12:48:49

设置一个隐藏域来用作判断是否隐藏了sidebar,并设置id(文章内容:main,sidebar:sidebar)
用JS设置文章内容的class,和sidebar的class

$(function(){        
    var is_hide = $('hf_hide_sidebar').val();
    if(is_hide){ // 隐藏
        $('#sidebar').removeClass('col-md-4');
        $('#main').removeClass('col-md-8').addClass('col-md-12');
    }
})
悲凉≈ 2022-09-04 12:48:49

草案里有css display flex(弹性布局),浏览器支持还不到位,但比JS方案要优雅得多,可以考虑结合polyfill实现

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文