Come rendere display: flex work per la reattività - Bootstrap?

Question

Ho una riga con 3-cols e ho un menu a discesa all'interno di cols, che compare sotto se scelgo un'opzione. Quando clicco su questa opzione, l'altezza delle colonne si estende/si flette/aumenta e funziona come dovrebbe. Per questo mi basta aggiungere questo elemento di CSS a remare per schermo intero

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

Questo è il mio codice 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> 

vista in modo iniziale è questo

Quando si fa clic

Quando si tratta di essere reattivo Rendo display : flex disabilitato sulla vista iniziale della tavoletta, l'altezza della colonna che ha un menu a discesa ha un'altezza diversa rispetto ad altre. controllalo. Le ragioni per farlo sono se non lo disabilito non è responsive add all.

Quando ho attivare visualizzazione: flettere; diventa non reattivo e assomiglia a questo, che non risponde.

Si può vedere una GIF che ho mostrato come agisce

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

La linea di fondo è

• Se imposto una proprietà elemento riga come visualizzazione : flex, diventa non reattivo.

Answer 1

Provare qualcosa come questo. Non esattamente il contenuto che hai postato. Ma funziona anche con contenuti di grandi dimensioni in una delle scatole.

Modifica: anche i contenuti aggiunti dinamicamente funzionano.

$("#add").on("click",function(){ 
 
    \t $(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>

JSfiddle

Answer 2

Basta aggiungere questo script e applicare questa classe eq_col ai div desiderati uguale altezza, funzionerà in tutte le dimensioni dello schermo.

Fatemi sapere qualsiasi problema.

<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>