Question

我使用Bootstrap 3作为我网站的框架。

使用此代码，我在页面上显示2个元素（ div A 和 div B ），每个元素的宽度均为屏幕宽度的50％。

<div class="row">
    <div class="col-lg-6" id="A"></div>
    <div class="col-lg-6" id="B"></div>
</div>

我希望关闭div B 并通过单击按钮/元素将屏幕宽度调整为100％。怎么可以用Bootstrap做到这一点？是否内置了CSS或JavaScript方式？

Answer 1

首先，你没有正确地结束你的DIV。您应该使用</div而不是</div>。然后，你可以用一些jQuery做你想要的，假设点击的按钮有一个button id：

$("#button").click(function(e) {
    e.preventDefault();

    $("#B").hide();
    $("#A").removeClass("col-lg-6").addClass("col-lg-12");
});

http://jsfiddle.net/juu60dbu/

或者，如果你想用纯JavaScript做到这一点：

document.getElementById("button").onclick = function() {
    document.getElementById("B").style.display = "none";

    document.getElementById("A").className = "";
    document.getElementById("A").className = "col-lg-12";
};

http://jsfiddle.net/g8k55deg/

Bootstrap关闭一个div调整另一个

1 个答案: