html - 如何防止 Bootstrap 列相互重叠

Question

我正在通过制作简单示例来学习使用 Bootstrap ，其中我有 3 列，大小分别为 2、8 和 2。我意识到在某些屏幕尺寸下，列内的内容相互重叠。我怎样才能防止这种重叠，我期望的是无论屏幕大小如何，页面始终保持 3 列，并且列内的内容将以换行符下降。

<div id="SummaryList" class="sidebar-left col-lg-2 col-md-2 col-sm-2 sidebar-offcanvas">
    <div class="mainTenant">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
</div>

<div id="main" class="col-lg-8 col-md-8 col-sm-8 col-xs-12" role="main">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<div class="col-lg-2 col-md-2 col-sm-2 rightSidebar" role="complementary" >
    <div class="container-fluid">cccccccccccccccccccccccccccccccccccccccccc</div>
</div>

这是我的 jsfiddle:https://jsfiddle.net/DTcHh/17967/

Answer 1

“打破”列的是字母。这不是现实生活中的例子，因为这很可能永远不会发生。让所有这些字母没有空格或断点。

您可以通过添加 word-break: break-all; 来“解决”这个问题。 An example.

但这又不是现实生活中的问题。

编辑:您可能会发现使用虚拟文本生成器很有用，例如:lipsum.com .示例:here.