防止 div 在 bootstrap 中环绕

Question

我正在使用引导程序来帮助构建网页。在一行中，我有三个并排的 div，宽度为：12 列布局中按顺序排列的 2 列、6 列和 4 列。

中间的 div 也设置了最小宽度，因此当最外面的 div 收缩超过一定宽度时，最右边的 div（4 列）没有足够的空间，因此它会环绕并悬挂在其他 div 下方。

我想防止这个 div 环绕，当屏幕缩小太小时迫使它被窗口切断。我将如何实现这个目标？

如有必要，我可以提供任何进一步的详细信息/代码/图片。

谢谢！

缠绕前

包裹后

Answer 1

要防止换行：将其添加到您的行中。

.row{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
}

width:100%;margin:0;padding:0;在此是可选的。

这可能会导致您的内容拉伸到完整高度，因此不要直接将内容放入引导列（例如`col-md-6等）中。在其中放置一个 div 并将内容放入该 div 中。

像这样 ：

<div class="col-xs-2">
  <div class="contentDiv">
    <!--Put your content here-->
  </div>
</div>

这是一个例子：

.row{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
}

<div class="col-xs-2">
  <div class="contentDiv">
    <!--Put your content here-->
  </div>
</div>