Bootstrap 4：带有 cols 的响应式容器答案

【问题标题】：Bootstrap 4: Responsive container with colsBootstrap 4：带有 cols 的响应式容器
【发布时间】：2018-03-19 12:51:12
【问题描述】：

我使用 Bootstrap 4 创建了一个页面，其中左侧有一个选项菜单和一个带有一行和一些列的容器 div。

为了显示选项菜单，通过更改“左”值使容器 div 变小。容器中列的排列那么应该改变 - 但它只会在浏览器窗口改变其大小时改变。

有没有办法在容器大小改变时重新排列列（不改变浏览器大小）？

<!DOCTYPE html>
<html lang="de">
 <head>
  <title>Grid-Test</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <script type="text/javascript">

$(function() {

$("#tree-toggle").click(function(e) {
  e.preventDefault();
  treeMenu.toggle();   // options
});


// 
var treeMenu = {
  visible: true,       // options 

  // show options
  show: function() {
    $('#divCustom').animate({left: '0'}, 500);   // divCustom verschieben
    this.visible = true;
  },

  // hide options
  hide: function() {
    var px = '-' + ($('#divTree').outerWidth() + 5) + 'px';
    $('#divCustom').animate({left: px}, 500);
    this.visible = false;
  }, 

  // toggle options
  toggle: function() {
    if(this.visible) {
      this.hide();
    } else
      this.show();        
    },     
  };

});

</script>
</head>
<body>
 <nav role="navigation" class="navbar navbar-expand-lg navbar-light bg-light fixed-top" style="margin-bottom:5px; padding:0 0.5rem 0 0">
  <a id="tree-toggle" title="Anlagenauswahl" class="btn btn-outline-secondary" style="display:flex; align-content:flex-start" href="">Show options</a>
  <div id="divCustom" style="position: fixed; top: 50px; left: 0; right: 0; bottom: 0; padding-top: 5px;">
   <div id="divTree" class="bg-light resizable ui-resizable" style="opacity: 0.8 !important; position: absolute; overflow-x: hidden; top: 10px; bottom: 10px; left: 0; padding: 5px; border-width: 1px 1px 1px 0; border-color: #e0e0e0; border-style: solid; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176); border-top-right-radius: 4px; border-bottom-right-radius: 4px; z-index: 1010; width:300px"></div>
   <div id="client" style="position: absolute; overflow-y: auto; top: 0; bottom: 0; right: 5px; padding-top: 5px; left:305px">
    <div id="clientContent" class="container-fluid pl-0 pr-0" style="margin:0; background-color:#f0f0f0">
     <div class="row">
      <div class="col-lg-6 col-xl-4">Col 1</div>
      <div class="col-lg-6 col-xl-4">Col 2</div>
      <div class="col-lg-6 col-xl-4">Col 3</div>                 
     </div>                 
    </div>                     
   </div>                
  </div>            
 </body>
</html>

【问题讨论】：

标签： containers bootstrap-4 responsive

【解决方案1】：

Bootstrap 中的断点使用基于视口宽度而不是父/容器宽度的 @media 查询。

这样做的唯一方法是在 jQuery 逻辑中有条件地添加适当的 col- 类。例如，

  // show options
  show: function() {
    $('#divCustom').find('.col-lg').removeClass('col');
    $('#divCustom').animate({left: '0'}, 500);   // divCustom verschieben
    this.visible = true;
  },

  // hide options
  hide: function() {
    $('#divCustom').find('.col-lg').addClass('col');
    var px = '-' + ($('#divTree').outerWidth() + 5) + 'px';
    $('#divCustom').animate({left: px}, 500);
    this.visible = false;
  }

演示：https://www.codeply.com/go/sMfAWKuX1T

【讨论】：

这不是我希望的优雅解决方案，但它是一种工作方式。非常感谢:-)