Question

不一定是引导问题，虽然我正在使用bootstrap 4进行此操作...我正在使用引导程序构建顶级导航。在顶部导航中，我有几个组件，我想控制它们在屏幕变窄时如何换行。

我有点挣扎，因为我想要实现的包装行为绝不是默认的，我不知道该怎么做或者是否可能。

在大屏幕上，我会看到：

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

随着屏幕缩小，我会看到：

进一步缩小：

缩小更多：

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

Answer 1

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

＆＃13;

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

＆＃13;

每个断点分开。

＆＃13;

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

＆＃13;

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

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

flexbox包装顺序和包含引导程序的组

1 个答案:

每个断点分开。