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

【问题标题】：Bootstrap flexbox columns next to each other instead of under each otherBootstrap flexbox 列彼此相邻而不是彼此下方
【发布时间】：2021-08-04 12:46:03
【问题描述】：

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

我的布局应该是这样的：

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

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap flexbox

【解决方案1】：

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

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

【讨论】：