如何防止bootstrap列相互重叠

时间:2016-03-08 12:30:18

标签: html css twitter-bootstrap

我正在学习使用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/

3 个答案:

答案 0 :(得分:1)

这是“打破”列的字母。这不是一个真实的例子,因为这很可能永远不会发生。拥有所有那些没有空格或断点的字母。

您可以通过添加word-break: break-all;来“修复”此问题。 An example.

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

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

答案 1 :(得分:0)

在容器word-break:break-all

中尝试此css

答案 2 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;