在 Bootstrap 上堆叠列并合并行 4

Question

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

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

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

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

也许我是从错误的方面来处理这个问题的……'They' 说 bootstrap 是 'mobile-first'。所以代码一定要写成“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>

Answer 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/

Answer 2

经过几个小时的摆弄:-)我开始工作了！这是对 David 回答的细微调整（这已经很棒了）

基本上首先要为移动设备构建块： A座| B座 | C座

Block C 在 XS 和 SM 上始终展开 (12) A/B 块在 XS/SM 上的大小始终为 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 对代码的轻微调整。他的解决方案将 'break' 在 SM（他使用 col-sm-6）而不是 col-6（适用于 XS）...

在 Bootstrap 上堆叠列并合并行 4

Stacking columns and merging rows on Bootstrap 4

bootstrap-4

bootstrap-studio