在运行时使用jquery改变div的列式布局。

Question

我正在整合一个由第三方供应商提供的基于网络的门户.它允许通过在其中一个部分提供javascript和CSS来定制，这将包括这个提供的javascript和CSS，同时加载网页以显示定制效果。

其中一个自定义需要隐藏一个div（login-frm），并使另一个div变宽。这些div元素有列式布局设置，如下图。

 <div class="login-wc col-md-6"> </div>

 div class="login-frm col-md-6"> </div>

如何修改 col-md-6 到 col-md-12 为第一个div使用javacript或jquery在页面加载？

任何帮助将是非常感激的。

谢谢你，Jaquen

Answer 1

你可以使用 removeClass 和 addClass 作为

$(document).ready(function(){
  $('.login-wc').removeClass('col-md-6').addClass('col-md-12');
})

$(document).ready(function(){
  $('.login-wc').removeClass('col-md-6').addClass('col-md-12');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login-wc col-md-6">ABC </div>

<div class="login-frm col-md-6">CDE </div>