Изменение размера столбца, щелкнув - Bootstrap

-1

Мне нужна ваша помощь еще раз.Изменение размера столбца, щелкнув - Bootstrap

Я хочу изменить размер столбца, нажав кнопку.

Как от этого:

Для этого:

С помощью следующего кода (от StackOverflow), что можно изменить один размер colummn. Я хочу изменить как минимум два.

HTML

<div class="col-md-2"> 
    <span class="glyphicon glyphicon-menu-hamburger"></span> 
    Some content 
    </div>

$('.glyphicon-menu-hamburger').click(function() { 
$(this) 
    // Find parent with the class that starts with "col-md" 
    // Change class to "col-md-3" 
    .closest('[class^="col-md"]') 
     .toggleClass('col-md-2 col-md-1') 
    // Find siblings of parent with similar class criteria 
    // - if all siblings are the same, you can use ".siblings()" 
    // Change class to "col-md-2" 
    .siblings('[class^="col-md"]') 
     .removeClass('col-md-1') 
     .addClass('col-md-2');});

Спасибо!

источник

2016-07-21 Kronkorken

Проверьте это:

$("button").click(function(){ 
 
    var columns_container = $(".dynamic-columns"); 
 
    if (!columns_container.hasClass("expanded")) { 
 
    $(".dynamic-columns .col:first").removeClass("col-xs-2"); 
 
    $(".dynamic-columns .col:first").addClass("col-xs-1"); 
 
    
 
    $(".dynamic-columns .col:last-child").removeClass("col-xs-8"); 
 
    $(".dynamic-columns .col:last-child").addClass("col-xs-9"); 
 
    columns_container.toggleClass("expanded"); 
 
    } 
 
    else { 
 
    $(".dynamic-columns .col:first").removeClass("col-xs-1"); 
 
    $(".dynamic-columns .col:first").addClass("col-xs-2"); 
 
    
 
    $(".dynamic-columns .col:last-child").removeClass("col-xs-9"); 
 
    $(".dynamic-columns .col:last-child").addClass("col-xs-8"); 
 
    columns_container.toggleClass("expanded"); 
 
    } 
 
});

button { 
 
    position: absolute; 
 
    top: 15px; 
 
    left: 15px; 
 
    z-index: 10; 
 
} 
 

 
h4 { 
 
    text-align: center; 
 
} 
 

 
.main-container { 
 
    margin-top: 50px; 
 
} 
 

 
.col { 
 
    background-color: #ccc; 
 
}

<html> 
 
    <head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script> 
 
    </head> 
 
    <body> 
 
    <div class="container-fluid main-container"> 
 
     <div class="row dynamic-columns"> 
 
     <button>Toggle</button> 
 
     <div class="col-xs-2 col"> 
 
      <h4>First Column</h4> 
 
     </div> 
 
     <div class="col-xs-2 col"> 
 
      <h4>Second Column</h4> 
 
     </div> 
 
     <div class="col-xs-8 col"> 
 
      <h4>Third column</h4> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

источник

2016-07-21 13:55:31 zsawaf

безупречный! Благодаря тонну!! – Kronkorken

Try This Way

$('.btn').click(function(){ 
$(this).parents('.row').find('.first-block').toggleClass('col-md-2 col-md-1'); 
$(this).parents('.row').find('.last-block').toggleClass('col-md-8 col-md-9'); 
})

HTML

<div class="row"> 
<div class="col-md-2 first-block"> 
<a href="#" class="btn btn-blue">Click</a> 
Col-MD-2 
</div> 
<div class="col-md-2"> 
Col-MD-2 
</div> 
<div class="col-md-8 last-block"> 
Col-MD-8 
</div> 

</div>

https://jsfiddle.net/tk89ufpy/1/

источник

2016-07-21 12:28:38

$('.changeColSize').click(function(){ 
 
\t \t \t var parent = $(this).parent('div'); 
 
\t \t \t $(parent).removeClass('col-xs-2').addClass('col-xs-1'); 
 

 
\t \t \t $(parent).siblings(".col-xs-8").removeClass('col-xs-8').addClass('col-xs-9'); 
 
\t \t });

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Column Change</title> 
 

 
\t <!-- Latest compiled and minified CSS --> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
</head> 
 
<body> 
 
\t \t 
 
\t <div class="container"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-xs-2"> 
 
\t \t \t \t <button class="btn btn-success changeColSize">click</button> 
 
\t \t \t \t Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-2"> 
 
\t \t \t \t Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
\t \t \t </div> 
 
\t \t \t <div class="col-xs-8"> 
 
\t \t \t \t Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 

 
\t <!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
\t 
 
</body> 
 
</html>

Это Html-код внутри тела.

<div class="container"> 
     <div class="row"> 
      <div class="col-md-2"> 
       <button class="btn btn-success changeColSize">Change Col Size</button> 
      </div> 
      <div class="col-md-2"> 
      </div> 
      <div class="col-md-8"> 
      </div> 
     </div> 
    </div>

Это функция jQuery для изменения столбцов.

$('.changeColSize').click(function(){ 
    //get the parent of button 
    var parent = $(this).parent('div'); 
    //change the parent 
    $(parent).removeClass('col-md-2').addClass('col-md-1'); 
    //change the sibling 
    $(parent).siblings(".col-md-8").removeClass('col-md-8') 
      .addClass('col-md-9'); 
});

Надежда Это поможет вам.

источник

2016-07-21 12:29:24

Теперь я хочу, чтобы удалить 1 столбец со всеми entrys. Если я использую:

$(".dynamic-columns .col:first").removeClass("col-xs-2"); $(".dynamic-columns .col:first").addClass("col-xs-0");

... это работа доцент.

источник

2016-07-25 10:23:06 Kronkorken

Изменение размера столбца, щелкнув - Bootstrap

ответ

Смежные вопросы