低于特定宽度时调整 Bootstrap 4 网格的大小

Question

我有一个简单的 Bootstrap 4 网格布局，我希望它具有响应性，因此它也可以在平板电脑和手机上运行。遗憾的是，我在响应式设计和视口方面没有太多经验，但我现在想出了一个像这样的非常基本的容器布局。

我有这个：

这在台式机上运行良好，但我也想支持较小的设备，因此当调整大小低于某个点时，理想情况下它应该重新格式化布局。例如，我可以隐藏Logo 和Timeline 框，然后将Banner 调整为12 列，将页面宽度调整为975px。

但是怎么做！？ ;-)

如果我想要这个怎么办：

如果页面低于 1300 像素，我确实有这个 CSS 会隐藏两个 DIV：

@media all and (max-width: 1300px) {
    .logo {
        display: none;
    }
    .timeline {
        display: none;
    }
}

我确实有这个 JSFiddle，https://jsfiddle.net/wmt74sfd/

Answer 1

您可以使用 Bootstrap 4 display utilities 和 auto-layout columns。

使用d-none d-xl-block 隐藏宽度.logo。在相邻列上使用col 而不是col-10，以便在隐藏logo col-2 时自动调整为全宽。 timeline 也是如此。

<div class="container page">
  <!-- Logo + Banner -->
  <div class="row">

    <!-- Logo -->
    <div class="col-2 logo d-none d-xl-block">
      <p><strong>Logo</strong></p>
      <p>Div: <span id="logoWidth"></span>px</p>
    </div>

    <!-- Banner -->
    <div class="col banner">
      <p><strong>Banner</strong></p>
      <p>Div: <span id="bannerWidth"></span>px</p>
    </div>
  </div>

    <!-- Menu + Content + Timeline -->
  <div class="row">

        <!-- Menu -->
    <div class="col-2 menu">
      <p><strong>Menu</strong></p>
      <p>Div: <span id="menuWidth"></span>px</p>
    </div>

        <!-- Content -->
    <div class="col content">
      <p><strong>Content</strong></p>
      <p>Monitor: <span id="screenWidth"></span>x<span id="screenHeight"></span>px</p>
      <p>Browser: <span id="screenAvailWidth"></span>x<span id="screenAvailHeight"></span>px</p>
      <p>Div: <span id="contentWidth"></span>px</p>
    </div>

        <!-- Timeline -->
    <div class="col-3 timeline d-none d-xl-block">
      <p><strong>Timeline</strong></p>
      <p>Div: <span id="timelineWidth"></span>px</p>
    </div>
  </div>

    <!-- Footer -->
  <div class="row">
    <div class="col-12 footer">
      <p><strong>Footer</strong></p>
      <p>Div: <span id="footerWidth"></span>px</p>
    </div>
  </div>
</div>

https://www.codeply.com/go/RuHXXyTBJd

如果您希望它正好在 1300 像素，请保留 @media 查询，当徽标或时间线隐藏时，相邻的 col 将调整为全角。另外，我认为您不想在 .page 上设置最小宽度，因为这会使其没有响应。