时间戳

首页 > 解决方案 > 在 Bootstrap 4 上堆叠列和合并行

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-4bootstrap-studio

解决方案

每当您有问题时，请先查看 Bootstrap 文档。它包含丢失的信息，其中可能包含您正在寻找的修复：订单类

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

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

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

推荐阅读