在 Bootstrap 4 上堆叠列和合并行答案

【问题标题】：Stacking columns and merging rows on Bootstrap 4在 Bootstrap 4 上堆叠列和合并行
【发布时间】：2021-01-21 16:41:35
【问题描述】：

我在 Bootstrap Studio 工作，想了解 Bootstrap (v4.x) 和 flexbox。 Flexbox 并没有让事情变得更容易。正如许多人已经尝试过并在 Stack 上询问过的那样，我也在尝试让列正常运行......到目前为止还没有运气。

桌面视图
标志 |搜索栏 |图标

移动视图（sm 及以下）
标志 |图标
搜索 (100%)

除了正确的事情之外，我可能已经尝试了所有方法...我玩过 flexbox 'order'/ push/pull 等...

也许我从错误的角度来处理这个问题......“他们”说引导程序是“移动优先”。所以代码一定要写成“Logo|icons|Search”还是桌面方式？

<html><head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
</head>
<body>
  <div class="container" id="header">
    <div class="row">
      <div class="col-sm-3" id="logo">Logo</div>
      <div class="col-sm-6" id="search">
        <form>
          <div class="form-group"><input type="search" class="form-control" name="search" placeholder="Zoeken..." /></div>
        </form>
      </div>
      <div class="col-sm-3 justify-content-lg-end justify-content-xl-end">
        <div class="btn-toolbar">
          <div role="group" class="btn-group"><a class="btn btn-lg" role="button" href="#">Icon</a><a class="btn btn-lg" role="button" href="#"><i class="fas fa-chart-bar"></i></a>
            <div class="dropdown btn-group" role="group"><a class="btn btn-lg" data-toggle="dropdown" aria-expanded="false" role="button">icon</i></a>
              <div class="dropdown-menu dropdown-menu-right"><a class="dropdown-item" href="#">Account</a><a class="dropdown-item" href="#">test</a><a class="dropdown-item" href="#">Log uit...</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

【问题讨论】：

标签： bootstrap-4 bootstrap-studio

【解决方案1】：

如果您有任何问题，请先查看 Bootstrap 文档。它包含丢失的信息，其中可能包含您正在寻找的修复：Order class

在进行修复之前，我想指出，移动优先的方法是您在移动设备上关注并构建视图，然后覆盖这些样式以确保它也适用于桌面或更大的屏幕。这样您就可以确保您的应用即使在狭窄的屏幕上也看起来不错。

如果您使用移动优先，则布局应如下所示：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            Logo
        </div>
        <div class="col-sm-6">
            <div role="group" class="btn-group">
                <a class="btn btn-lg" role="button" href="#">Icon</a>
                <a class="btn btn-lg" role="button" href="#">
                    <i class="fas fa-chart-bar"></i>
                </a>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-lg dropdown-toggle" 
                        data-toggle="dropdown">
                      Dropdown
                    </button>
                    <div class="dropdown-menu dropdown-menu-right">
                        <a class="dropdown-item" href="#">Account</a>
                        <a class="dropdown-item" href="#">test</a>
                        <a class="dropdown-item" href="#">Log uit...</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <form>
                <div class="form-group">
                    <input type="search" class="form-control" name="search" 
                        placeholder="Zoeken..." />
                </div>
            </form>
        </div>
    </div>
</div>

在完成移动视图之后，您将专注于桌面视图。我唯一需要的是更改列宽并设置它们的顺序：

<div class="row">
    <div class="col-sm-6 col-md-2">...</div>
    <div class="col-sm-6 col-md-5 order-md-2">...</div>
    <div class="col-sm-12 col-md-5 order-md-1">...</div>
</div>

这已经像你想要的那样工作了：https://jsfiddle.net/davidliang2008/ndsk4hL3/13/

但我的强迫症告诉我你可以做得更好。不知道大家有没有阅读过 Bootstrap 文档，意识到有一个叫Navbar的组件可以用？

我不想为你做所有事情，所以我特意保留了导航栏演示： https://jsfiddle.net/davidliang2008/ndsk4hL3/25/

【讨论】：

太棒了！我已经阅读并阅读并阅读了 Bootstrap 文档。它需要一个不同的视角（移动优先），所以代码也必须模仿它！

【解决方案2】：

经过几个小时的摆弄 :-) 我搞定了！与大卫的回答略有不同（这已经很棒了）

基本上，首先您为移动构建块： A座 | B座 | C块

块 C 在 XS 和 SM 上总是展开 (12) 在 XS/SM 上，块 A/B 的大小始终为 6 在 MD 处，大小变为：3-6-3

最后但并非最不重要的是，在 MD 和更大的块 3 被“命令”在块 2 之前显示！

<div class="row">
     <div class="col-6 col-md-3">.col-6 .col-md-3</div>
      <div class="col-6 col-md-3 order-md-3">.col-6 .col-md-3</div>
  <div class="col-12 col-md-6 order-md-2">.col-12 .col-md-6</div>
</div>

我对 David 的代码进行了微调。他的解决方案将在 SM（他使用 col-sm-6）而不是 col-6（适用于 XS）处“中断”...

【讨论】：