В начальной загрузке 4, если скрыть и показать с JQuery столбцы потеряли flex - PullRequest
Новая
       27

В начальной загрузке 4, если скрыть и показать с JQuery столбцы потеряли flex

0 голосов
/ 31 октября 2019

С помощью начальной загрузки 3 я могу скрыть строку с помощью css и показать ее с помощью jquery. Если я делаю это с помощью bootstrap4, столбцы в строке теряются гибкими.

Почему это? Есть решение этой проблемы? У меня есть много кода для записи bs3 !! 

 .nascosto{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div onClick='$("#test").show()'>test</div>
    
    <div class="container">
    <div class="row nascosto" id="test">
    
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    </div>
    </div>

, если нажать кнопку «проверить» столбец не изгибается.

Только в bs4, в 3 всегда работает

Ответы [ 3 ]

0 голосов
/ 31 октября 2019

Вы можете управлять видимостью, используя Jquery. 

$('#testHeader').on('click',function(){

  if(!$('#test').is(":visible"))
  {
    $("#test").show()
  }
  else
  {
    $("#test").hide()
  }

})
.nascosto{display:none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  id="testHeader">test</div>
    
    <div class="container">
    <div class="row nascosto" id="test">
        
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    <div class="col-12 col-sm-6 col-md-3">
    content
    </div>
    
    </div>
    </div>
0 голосов
/ 31 октября 2019

ДЕМО: https://jsfiddle.net/t5wo74rd/

тест 
<div class="container">
<div class="nascosto" id="test">   

<div class="row">


<div class="col-12 col-sm-6 col-md-3">
content
</div>

<div class="col-12 col-sm-6 col-md-3">
content
</div>

<div class="col-12 col-sm-6 col-md-3">
content
</div>

<div class="col-12 col-sm-6 col-md-3">
content
</div>

</div>
</div>
</div>

 .nascosto{display:none}
0 голосов
/ 31 октября 2019

Проблема связана с использованием show() для отображения строки. show() делает блок элементов, но вам нужно, чтобы он был гибким.

Так что вместо этого вы можете попробовать с $("#test").css('display', 'flex')

Это должно решить проблему.

Этоработает в Bootstrap 3, потому что, насколько я помню, Bootstrap <4 использует плавающие числа для сетки. </p>

...