Bootstrap close one div resize another

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> 

Я хочу к близко сНу B и изменения размера сОн А до 100% ширины экрана, нажав/элемент кнопки. Как можно сделать это с помощью Bootstrap? Есть ли способ CSS или JavaScript?

Answer 1

Прежде всего, вы не заканчиваете свои DIVs должным образом. Вместо </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/