低于特定宽度

Question

我有一个简单的Bootstrap 4网格布局，我想做出响应，所以它也适用于平板电脑和手机。遗憾的是，我对响应式设计和视口没有多少经验，但我现在想出了一个非常基本的容器布局。

我有这个：

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

但是如何！？ ; - ）

如果我想要这个怎么办：

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

@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＆lt; 1200像素。在相邻列上使用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

如果您希望它完全在1300px，请保留@media查询，并且当隐藏徽标或时间线时，相邻的col将调整为全宽。另外，我认为您不希望在.page上设置最小宽度，因为它会使其无法响应。