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.

Answer 2

在容器word-break:break-all

中尝试此css

Answer 3

使用以下更新的代码来解决问题。

＆＃13;

div {
  word-wrap: break-word;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page-container">
  <div id="mainContainer" class="container-fluid">

    <div class="row row-offcanvas row-offcanvas-left">

      <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>


    </div>
  </div>
</div>

＆＃13;

如何防止bootstrap列相互重叠

3 个答案: