twitter-bootstrap - Bootstrap 4 flex系统支持父列中的特定自行项吗？

Question

我有以下导航栏:

<div class="d-flex flex-column flex-lg-row">
   ......
</div>

例如:

.bd-highlight {
    background-color: rgba(86,61,124,.15);
    border: 1px solid rgba(86,61,124,.15);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex flex-column flex-lg-row justify-content-between bd-highlight">
  <div class="p-2 bd-highlight order-0">Flex item 1 (LOGO)</div>
  <div class="p-2 bd-highlight order-2 order-lg-1">Flex item 2 (Nav. Menu)</div>
  <div class="p-2 bd-highlight order-1 order-lg-2">Flex item 3 (Search Form)</div>
  <div class="p-2 bd-highlight order-3">Flex item 4 (Acc. Menu)</div>
</div>

但我的设计包括如下特殊情况。

1- 媒体设备(≥ 992px):并排放置。

2- 媒体设备 ( < 992px ): 都在下面。但是 Flex item 2 和 Flex item 3 它们在移动。为此，我使用了 order-* 类。 -参见上面的代码片段和下图。-之后，我希望并排显示自己的行(1 和 3)(2 和 4 )

一切正常。我找不到如何并排显示 Flex item 1 - Flex item 3 和 Flex item 2 - Flex item 4。

(通过自己，因为 parent 有专栏，我无法添加更多 parent ，因为他们正在搬家。)

像这样:

Bootstrap 4 或 flexbox 是否支持此操作？这样的想法是可能的还是我应该从其他方面寻找解决方案？

例如:

<div class="flex-column">
    <div class="flex-self-row1"></div>
    <div class="flex-self-row1"></div>
    <div class="flex-self-row2"></div>
    <div class="flex-self-row2"></div>
</div>

Answer 1

如果你想让你的父级保持为 flex-column，除非你将 Flex 元素 1 和 3 分组为一行和 Flex 元素，否则无法实现你想要的媒体设备 < 992px 2 和 4 作为另一行，或者您愿意复制这些元素并根据媒体查询显示/隐藏。

另一种方法是将父项显示为flex-row，并让它wrap，然后将这些flex元素的宽度设置为50%!

为了让您的 HTML 保持整洁，我打算使用 Bootstrap 中的 width 实用程序来设置宽度，但遗憾的是 width 实用程序类没有响应式变化。因此，我更改了 HTML 布局，添加了 2 个自定义类 .parent 和 .item 并使用自定义样式设置它们的样式。

HTML

<div class="d-flex bd-highlight parent">
    <div class="p-2 bd-highlight order-0 item">
        Flex item 1 (LOGO)
    </div>
    <div class="p-2 bd-highlight order-2 order-lg-1 item">
        Flex item 2 (Nav. Menu)
    </div>
    <div class="p-2 bd-highlight order-1 order-lg-2 item">
        Flex item 3 (Search Form)
    </div>
    <div class="p-2 bd-highlight order-3 item">
        Flex item 4 (Acc. Menu)
    </div>
</div>

媒体设备 < 992px

.parent {
    flex-flow: row wrap;
}

.parent .item {
    width: 50%;
}

媒体设备 >= 992px

@media (min-width: 992px) {
    .parent {
        justify-content: space-between;
    }

    .parent .item {
        width: auto;
    }
}

fiddle : http://jsfiddle.net/aq9Laaew/273412/