Wie man Anzeige macht: flex Arbeit für Reaktionsfähigkeit - Bootstrap?

Question

Ich habe eine Zeile mit 3-Spalten und ein Dropdown-Menü in Spalten, die unten angezeigt wird, wenn ich eine Option auswähle. Wenn ich auf dieses Optionsfeld klicke, wird die Höhe der Spalten erweitert/flex/erhöhen und es funktioniert wie es sollte. Für, dass ich dieses CSS-Element fügen Sie einfach für Vollbild

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

Das ist mein HTML-Code

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

So ursprüngliche Ansicht ist diese

rudern Wenn es angeklickt wird

Wenn es darum geht, responsive zu sein, mache ich Anzeige: flex deaktiviert auf Tablet anfängliche Ansicht, die Höhe der Spalte, die ein Dropdown hat andere Höhe als andere. prüfen Sie. Die Gründe dafür sind, wenn ich nicht deaktiviert, es ist nicht reaktionsfähig alles hinzuzufügen.

Wenn ich aktivieren Anzeige: flex; reagiert es nicht mehr und sieht so aus, dass es nicht reagiert.

Sie können eine gif sehen, dass ich gezeigt habe, wie es wirkt

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

Unterm Strich ist

• Wenn ich ein Zeilenelement Eigenschaft als Anzeige eingestellt : flex, es reagiert nicht mehr.

Answer 1

Versuchen Sie etwas wie das. Nicht genau der Inhalt, den du gepostet hast. Aber das funktioniert auch mit großen Inhalten in einer der Boxen.

Bearbeiten: Dynamisch hinzugefügt Inhalt funktioniert auch.

$("#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

einfach dieses Skript hinzufügen und diese Klasse gelten eq_col auf die DIVs Sie gleiche Höhe wollen, wird es in allen Bildschirmgrößen arbeiten.

Lassen Sie mich jedes Problem wissen.

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