响应式容器答案

【问题标题】：Responsive containers响应式容器
【发布时间】：2020-04-05 03:28:51
【问题描述】：

我在我的项目中使用 Bootstrap 4。在我的模板中，我想仅对搜索结果使用更多内容。我正在寻找一种允许为我自己的断点使用响应式容器的解决方案。我找到了这样一个project。我正在尝试实施此解决方案，但仍然没有预期的效果。我的模板如下所示：

    <head>
      <style>
      .MultiColBox {
        background: #fff;
        border: 1px solid hsla(0, 0%, 0%, 0.075);
        padding: 1.5em;
      }
    
      .MultiColBox-title {
        border-bottom: 1px solid hsla(0, 0%, 0%, .1);
        font-weight: 700;
        letter-spacing: 0.15em;
        margin-bottom: 1em;
        padding-bottom: .5em;
        text-transform: uppercase;
      }
    
      .MultiColBox-content {
        column-count: 1;
      }
    
      .MultiColBox-content > aside {
        color: #aaa;
      }
    
      /* -------------- */
      /* Breakpoint: C2 */
      /* -------------- */
    
      .C2 > .MultiColBox .MultiColBox-content {
        column-count: 2;
      }
    
      /* -------------- */
      /* Breakpoint: C3 */
      /* -------------- */
    
      .C3 > .MultiColBox .MultiColBox-content {
        column-count: 3;
      }
    
      /* -------------- */
      /* Breakpoint: C4 */
      /* -------------- */
    
      .C4 > .MultiColBox .MultiColBox-content {
        column-count: 4;
      }
      </style>
    </head>
    
    <body>
    <!-- Container element -->
    <div data-breakpoints='{"C2":400,"C3":800,"C4":1200}' data-observe-resizes>
      <!-- Component element -->
      <div class="MultiColBox">
        CONTEINER 1 
      </div>
      
      <div class="MultiColBox">
        CONTEINER 2
      </div>
      
      <div class="MultiColBox">
        CONTEIENR 3
      </div>
      
      <div class="MultiColBox">
        CONTEIENR 4
      </div> 
    </div>

      <script>
      // Only run if ResizeObserver is supported.
      if ('ResizeObserver' in self) {
        // Create a single ResizeObserver instance to handle all
        // container elements. The instance is created with a callback,
        // which is invoked as soon as an element is observed as well
        // as any time that element's size changes.
        var ro = new ResizeObserver(function(entries) {
          // Default breakpoints that should apply to all observed
          // elements that don't define their own custom breakpoints.
          var defaultBreakpoints = {SM: 384, MD: 576, LG: 768, XL: 960};
    
          entries.forEach(function(entry) {
            // If breakpoints are defined on the observed element,
            // use them. Otherwise use the defaults.
            var breakpoints = entry.target.dataset.breakpoints ?
                JSON.parse(entry.target.dataset.breakpoints) :
                defaultBreakpoints;
    
            // Update the matching breakpoints on the observed element.
            Object.keys(breakpoints).forEach(function(breakpoint) {
              var minWidth = breakpoints[breakpoint];
              if (entry.contentRect.width >= minWidth) {
                entry.target.classList.add(breakpoint);
              } else {
                entry.target.classList.remove(breakpoint);
              }
            });
          });
        });
    
        // Find all elements with the `data-observe-resizes` attribute
        // and start observing them.
        var elements = document.querySelectorAll('[data-observe-resizes]');
        for (var element, i = 0; element = elements[i]; i++) {
          ro.observe(element);
        }
      }
      </script>
    </body>

而且我的容器不能正常工作。它们都显示在彼此下方，而我使用的屏幕大小没有任何差异。

我有两个问题：

仅对网站的某些部分（如搜索结果）使用 Bootstrap 和其他容器解决方案是否存在任何矛盾？
为什么我的解决方案不能正常工作？

【问题讨论】：

为什么不想使用引导断点或使用 css/sass 创建自己的媒体查询？
引导断点运行太晚。我需要其他宽度。

标签： html bootstrap-4 responsive-design responsive

【解决方案1】：

您可以使用媒体查询而不是使用数据断点来设置所需的像素宽度。您可以将其写入您的 Bootstrap 工作流程。

例子：

@media screen and (max-width: 800px) {
    #site-header {
        display: none;
    }
}

编辑（类似示例）：

.change-me {
  background-color: #f1f1f1;
  padding: 10px;
}

@media screen and (max-width: 800px) {
  .change-me {
    background-color: red;
  }
}

@media screen and (max-width: 700px) {
  .change-me {
    background-color: blue;
  }
}

@media screen and (max-width: 600px) {
  .change-me {
    background-color: yellow;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <br><br>
  <div class="row">
    <div class="col-md-3">
      <div class="change-me">
        1 of 4
      </div>
    </div>
    <div class="col-md-3">
      <div class="change-me">
        2 of 4
      </div>
    </div>
    <div class="col-md-3">
      <div class="change-me">
        3 of 4
      </div>
    </div>
    <div class="col-md-3">
      <div class="change-me">
        4 of 4
      </div>
    </div>
  </div>
</div>

【讨论】：

感谢您的回复。你能扩大你的答案吗？如何正确应用到我的带有四个容器的示例。