html - 低于一定宽度时调整 Bootstrap 4 网格的大小

Question

我有一个简单的 Bootstrap 4 网格布局，我想将其设为响应式，以便它也可以在平板电脑和手机上运行。遗憾的是，我在响应式设计和视口(viewport)方面经验不多，但我现在想出了一个像这样的非常基本的容器布局。

我有这个:

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

但是怎么办!？ ;-)

如果我想要这个怎么办:

我确实有这个 CSS，如果页面低于 1300 像素，它会隐藏两个 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 隐藏宽度 < 1200px 的 .logo。在相邻列上使用 col 而不是 col-10 以便在隐藏 logo col-2 时自动将大小调整为全 Angular 。 时间轴也是如此。

<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 查询，当 Logo 或时间线隐藏时，相邻的 col 将调整为全 Angular 。另外，我认为您不想在 .page 上设置最小宽度，因为这会导致它没有响应。