在 Bootstrap 4 上堆叠列和合并行

如何解决在 Bootstrap 4 上堆叠列和合并行

我在 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 文档。它包含丢失的信息，其中可能包含您正在寻找的修复：Order class

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

如果您使用 Mobile First，布局应如下所示：

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

经过几个小时的摆弄:-) 我开始工作了！这是大卫的回答的一个小调整（这已经很了不起了）

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

块 C 在 XS 和 SM 上总是展开 (12) 块 A/B 在 XS/SM 上总是大小为 6 并且在 MD 大小变为：3-6-3

最后但并非最不重要的一点是，在 MD 和更大的 Block 3 上“有序”显示在 Block 2 之前！！

@import '~primeng/resources/primeng.min.css';
@import '~primeng/resources/themes/bootstrap4-light-blue/theme.css';
@import '~primeicons/primeicons.css';

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