twitter-bootstrap - flexbox 包装顺序和 bootstrap 组

Question

不一定是 Bootstrap 问题，尽管我正在使用 Bootstrap 4 执行此操作...我正在使用 Bootstrap 构建顶部导航。在顶部导航栏中，我有几个组件，我想控制它们在屏幕变窄时如何环绕。

我有点挣扎，因为我想要实现的包装行为绝不是默认的，我不确定如何去做或是否可能。

在宽屏幕上，我会看到这个:

A 和 B 左对齐，而 C、D 和 E 右对齐。

随着屏幕变窄一点，我会看到这个:

进一步缩小:

缩小更多:

我只是不确定如何获得包装顺序和理由。我已经尝试将各种组件与 div 组合在一起，但似乎没有任何效果。

Answer 1

启动移动设备并相应地使用 offset-* 和 order-* 类。您需要将每个断点的 offset-* 和 order-* 重置为 *-0。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-3 order-1 order-sm-1 order-md-1 order-lg-1 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> A</div>
    </div>
    <div class="col-1 order-3 order-sm-4 order-md-5 order-lg-2  mb-3 ">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> B</div>
    </div>
    <div class="col-5 order-5 order-sm-5 order-md-2 order-lg-3 offset-7 offset-sm-6 offset-md-1 offset-lg-0 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> C</div>
    </div>
    <div class="col-2 order-4 order-sm-2 order-md-3 order-lg-4 offset-9 offset-sm-6 offset-md-0 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> D</div>
    </div>
    <div class="col-1 order-2 order-sm-3 order-md-4 order-lg-5 offset-8 offset-sm-0 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> E</div>
    </div>
  </div>
</div>

---

每个断点分开。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<h1 class="text-center m-3">xs</h1>
<div class="container">
  <div class="row">
    <div class="col-3 order-1 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> A</div>
    </div>
    <div class="col-1 order-3 mb-3 ">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> B</div>
    </div>
    <div class="col-5 offset-7 order-5  mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> C</div>
    </div>
    <div class="col-2 order-4 offset-9  mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> D</div>
    </div>
    <div class="col-1 order-2 offset-8  mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> E</div>
    </div>
  </div>
</div>

<h1 class="text-center m-3">sm</h1>
<div class="container ">
  <div class="row">
    <div class="col-sm-3 order-sm-1 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> A</div>
    </div>
    <div class="col-sm-1 order-sm-4  mb-3 ">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> B</div>
    </div>
    <div class="col-sm-5 order-sm-5 offset-sm-6 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> C</div>
    </div>
    <div class="col-sm-2 order-sm-2  offset-sm-6 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> D</div>
    </div>
    <div class="col-sm-1 order-sm-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> E</div>
    </div>
  </div>
</div>

<h1 class="text-center m-3">md</h1>
<div class="container">
  <div class="row">
    <div class="col-md-3 mb-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> A</div>
    </div>
    <div class="col-md-1 order-5">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> B</div>
    </div>
    <div class="col-md-5 offset-1 mr-auto">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> C</div>
    </div>
    <div class="col-2 col-lg-2">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> D</div>
    </div>
    <div class="col-1 col-lg-1">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> E</div>
    </div>
  </div>
</div>


<h1 class="text-center m-3">Lg</h1>
<div class="container">
  <div class="row">
    <div class="col-3  col-lg-3">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> A</div>
    </div>
    <div class="col-1 col-lg-1">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> B</div>
    </div>
    <div class="col-5 col-lg-5">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> C</div>
    </div>
    <div class="col-2 col-lg-2">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> D</div>
    </div>
    <div class="col-1 col-lg-1">
      <div class="w-100 bg-info p-3 d-flex justify-content-center"> E</div>
    </div>
  </div>
</div>

增加/减少col-* 和offset-* 类，如果它们与img 中的不一样。

全屏查看或访问这两个链接

1. > https://codepen.io/anon/pen/rvorge
2. > https://codepen.io/anon/pen/MGZBNw