Bootstrap flexbox 列彼此相邻而不是彼此下方

Question

我在使用 Bootstrap CSS 和 flexbox 修复布局时遇到了困难。

我的布局应该是这样的：

English           <rowdata>
French            <rowdata>
Dutch             <rowdata>
                  <rowdata>
                  <rowdata>
                  <rowdata>

然而，其中一个行数据包含一个相当大的元素，有很多复选框（以指示不同的日期部分），并且由于这个宽度，整个右侧将导致我的布局完全移动到语言下方“标签”。 我该如何解决这个问题？

这是显示问题的 JSFiddle： https://jsfiddle.net/751pbsu3/

这是相同的小提琴，但没有复选框字段（这会弄乱布局），以显示它的外观： https://jsfiddle.net/j8e0th5g/

Answer 1

这是工作示例，您必须使用引导程序断点。检查我附加的类 col-md-2 和 col-md-10

This is the JSFiddle that resolved the issue: https://jsfiddle.net/mko72x6y/1/