Question

我用Bootstrap 4创建了一个页面，我在左边有一个选项菜单，一个带有行和一些cols的container-div。

要显示选项菜单，可以通过更改＆＃34; left＆＃34;使容器div变小。值。 cols在容器中的排列然后应该改变 - 但只有在浏览器窗口改变其大小时才会改变。

当容器的大小发生变化（不改变浏览器大小）时，有没有办法让cols重新排列？

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

Answer 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

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

1 个答案: