Bootstrap flex 使 div 溢出答案

【问题标题】：Bootstrap flex making the div overflowBootstrap flex 使 div 溢出
【发布时间】：2021-01-01 14:21:24
【问题描述】：

我正在使用 Bootstrap 4。我遇到了一个奇怪的问题。我正在使用 jquery 添加 html。 div 调用了 .col-md-9 d-flex。当其他 div 被附加到主 div（在父 col-md-9 下）时，它会溢出并占用整个页面（宽度）并覆盖另一个 div（col-md-3）。代码为

<div class="container-fluid">
              <div class="row">
                  <div class="col-md-9 filters-div d-flex"><!-- the dynamic code will append to this div-->
                         <div class="col-md-2 col-xs-6">      
                            <div class="form-group">
                              <label>Date and time range:</label>

                              <div class="input-group">
                                <div class="input-group-prepend">
                                  <span class="input-group-text"><i class="far fa-clock"></i></span>
                                </div>
                                <input type="text" id="reservationdate" class="form-control float-right datetimepicker-input" data-toggle="datetimepicker" data-target="#reservationdate">
                              </div>
                              <!-- /.input group -->
                            </div>
                          <!-- /.form group -->
                          </div> 
                          
                    </div>
                    <div class="col-md-3 d-flex">
                      <div class="my-div">
                        <a href="javascript:void(0)" data-toggle="modal" data-target="#modal-default">
                              <i class="fas fa-filter"></i>Add Filters
                            </a>
                        <a href="#" class="btn btn-secondary close-result">Cancel</a>
                        <a href="javascript:void(0)" class="btn btn-success get-result">Submit</a>

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

产生dom元素的jquery如下

$(document).delegate(".add-filter","click",function(){
    $val=$("#filter-add").val();
    $text=$('#filter-add option:selected').text();
  $new_text=$text.replace(/ /g, "-");

    $html="<div class='col-md-2 col-xs-6 delete-all' id='"+$new_text+"'><div class='form-group'>";
    $html+="<label>"+$text+":</label>";
    $html+="<div class='input-group'>";
    $html+="<input type='text' class='form-control float-right'><div class='input-group-prepend'><span class='input-group-text delete-filter' data-text='"+$text+"' data-value='"+$val+"'><i class='fas fa-trash'></i></span> </div></div>";
    $html+="</div></div>";

    $(".filters-div").append($html);
    $("#filter-add option:selected").remove();
    $('#filter-add').prop('selectedIndex',0);

});

请告诉我是什么问题。例子是here

更新：

截图如下

【问题讨论】：

具体是哪个元素溢出？
从jquery动态添加的。当你添加它们时。
@kb_ 你可以试试这个链接，如果你添加超过 5 个过滤器你会看到问题。
@kb_ 我也添加了截图

标签： html jquery css bootstrap-4 flexbox

【解决方案1】：

您可以在 div 中使用 flex-wrap：

<div class="col-md-9 filters-div d-flex flex-wrap"><!-- the dynamic code will append to this div-->

相反，如果您不想换行，可以减小 col-md-2 的 max-width：

.col-md-2 {
    max-width: 12% !important;
}

你的问题取决于 col-md-2：当你有很多问题时。

【讨论】：