Как сделать отображение: гибкая работа для реагирования - Bootstrap?

У меня есть строка с 3-cols и выпадающее меню внутри cols, которое отображается ниже, если я выберу вариант. Когда я нажимаю эту кнопку, высота столбцов расширяется/гибкая/увеличивается, и она работает так, как должна. Для этого я просто добавляю этот элемент css в строку для полноэкранного

@media only screen and (min-width: 1201px)
.payfullMajsticBlox .portlet-body > .row {
    display: flex;
}

Это мой HTML-код

<div class="payfullMajsticBlox">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-cogs font-green-sharp"></i>
            <span class="caption-subject font-green-sharp bold uppercase">POS AYARLARI</span>
        </div>
        <div class="tools">
            <a class="collapse" href="javascript:;" data-original-title="" title="">
            </a>
            <a class="config" data-toggle="modal" href="#portlet-config" data-original-title="" title="">
            </a>
            <a class="reload" href="javascript:;" data-original-title="" title="">
            </a>
            <a class="remove" href="javascript:;" data-original-title="" title="">
            </a>
        </div>
    </div>
    <div class="portlet-body">
        <!--<h4>Pulsate any page elements.</h4>-->
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">API Kullanıcı adı</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="Merchant ID">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">Şifre</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="API Şifresi">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">
                <h6 class="payfullTitle">Mağaza Numarası</h6>
                <div class="form-group form-md">
                    <input type="text" class="form-control" id="form_control_1" placeholder="Client ID / Terminal">
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6   payfullcol popovers" data-content="XXX" data-placement="top" data-trigger="hover" data-container="body" data-original-title="" title="">

                <h6 class="payfullTitle">3D Secure kullan</h6>
                <div class="clearfix">
                    <div class="btn-group btn-group payfullBtns" data-toggle="buttons">
                        <label class="btn green active" id="P1BsecureS1">
                            <input type="radio" class="toggle">Varsayılan</label>
                        <label class="btn green" id="P1BsecureS2">
                            <input type="radio" class="toggle">3D Secure</label>
                    </div>
                </div>
                <br><br>

                <div id="P1B3DSecure" class="payfullShowHide" style="display: none;">
                    <h6 class="payfullTitle">Üye İş Yeri Anahtarı</h6>
                    <div class="form-group form-md">
                        <input type="text" class="form-control" id="form_control_1" placeholder="POS Net Id / Store key">
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

Итак, начальное представление

Когда он щелкнут

Когда речь идет о отзывчивости, я делаю отображение: flex отключено на начальном представлении планшета, высота столбца с разворотом имеет разную высоту, чем другие. Проверь это. Причины этого - если я не отключен, он не реагирует, добавьте все.

Когда я включаю display: flex;, он становится невосприимчивым и выглядит так, что не реагирует.

Вы можете увидеть gif, который я показал, как он действует

http://d.pr/i/iv8J/3rSricgh

Нижняя строка

Если я устанавливаю свойство элемента строки как display: flex, он становится невосприимчивым.

Ответ 1

Попробуйте что-нибудь подобное. Не точно содержание, которое вы разместили. Но это также работает с большим содержимым в одном из полей.

Изменить: динамически добавленный контент также работает.

$("#add").on("click",function(){
   	$(this).parent().prepend('<div class="added-content" >Added Content </div>');
});

.flexbox{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
.flex-item{
  
  flex:1;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;  
}
.flex-item p{
  margin: 10px 5px;
  padding: 10px;
  background:yellow;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#add{
    padding:5px;
    background:red;
}
.added-content{
    background:blue;
    margin-bottom:5px;
    color:white;
}
.breakpoint{
  display:none;
}

@media all and (max-width: 1201px){
  .flex-item{
      flex: none;
      width:25%;
  }
}

@media all and (max-width: 601px){
  .flex-item{
      flex: none;
      width:50%;
  }
}

@media all and (max-width: 401px){
  .flex-item{
      flex: none;
      width:100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox">
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
      <p ><button id="add">Add Content on Click</button></p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>
  <div class="flex-item">
    <p>Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content 
      Whole lot of content
        Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of content  Whole lot of content 
      Whole lot of contentContent</p>
  </div>
  <div class="flex-item">
    <p>Content</p>
  </div>

  
</div>

Ответ 2

Просто добавьте этот script и примените этот класс eq_col к DIV, для которого вы хотите равную высоту, он будет работать во всех размерах экрана.

Дайте мне знать любую проблему.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>
    $(document).ready(function(){

    var highestBox = 0;
        $('.eq_col').each(function(){  
                if($(this).height() > highestBox){  
                highestBox = $(this).height();  
        }
    });    
    $('.eq_col').height(highestBox);

});
</script>