jquery - 如何使显示:flex work for responsiveness - Bootstrap?

Question

我有一行 3 列，列内有一个下拉菜单，如果我选择一个选项，它会显示在下面。 当我单击此选项按钮时，列的高度会扩展/flex/增加，并且它可以正常工作。 为此，我只是将这个 css 元素添加到 full screen

的行中

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

所以最初的看法是这样的

点击时

当涉及到响应时，我在平板电脑初始 View 上禁用了display:flex，具有下拉列表的列的高度与其他列的高度不同。核实。这样做的原因是，如果我不禁用它，它就不会响应添加所有内容。

当我启用 display: flex; 时，它变得没有响应，看起来像这样，没有响应。

你可以看到我展示它是如何工作的 gif

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

底线是

• 如果我将行元素属性设置为 display:flex，它会变得无响应。

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

JSfiddle