自适应显示底部菜单版权联系方式二维码

发布单位:弘帝企业智能建站系统演示学习代码 发布人:张鑫鑫 发布时间:2021/2/10 16:34:38 关注度:447

Demo:hosp

bottom.zhg:生成文件直接复制粘贴即可,如有问题,请联系我们纠错。

<div class="bottom bg-gray-800 gray-500 py-4">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 order-2 order-lg-1">
                <div class="d-none d-lg-flex menu">$func_menu(pos=1,divi=none)$</div>
                <div class="copyright">$show_copyright$</div>
                <div class="ba mt-2">
工信备案号皖ICP备07503252号-9
</div> </div> <div class="col-lg-4 order-1 mb-3 order-lg-2 mb-lg-0"></div> </div> </div> </div>
CSS:

.bottom {
  .menu {
    margin: 0;

    menu ul li a {
      justify-content: left;
      padding-left: 0;
      padding-right: 0;
      font-size: 14px;
    }
  }

  .copyright div {
    line-height: 26px;
  }

  .ba .Margin {
    display: flex;
    flex-direction: row;

    .mii {
      margin-right: 20px;
    }
  }
}

@media (min-width: 992px) {
  .bottom {
    padding-bottom: 0;
  }

  .bottom .col-lg-10 {
    text-align: left;
  }

  .bottom .RowsTitle {
    display: flex;
    margin-bottom: 15px;
  }

  .bottom .RowsTitle h3 {
    display: block;
    text-align: left;
    font-size: 1.125rem;
  }

  .bottom .wechat {
    margin-top: 0;
    text-align: right;
  }
}

底部模板文件一般为bottom.zhg,使用时只需复制粘贴,如有需要可以更换各种弘帝组件,略做颜色、大小、位置、背景图的简单修改,即可完成新品大作。