我正在学习使用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/
答案 0 :(得分:1)
这是“打破”列的字母。这不是一个真实的例子,因为这很可能永远不会发生。拥有所有那些没有空格或断点的字母。
您可以通过添加word-break: break-all;
来“修复”此问题。 An example.
但这又不是现实生活中的问题。
编辑:您可能会发现使用虚拟文本生成器非常有用,例如:lipsum.com。示例:here.
答案 1 :(得分:0)
在容器word-break:break-all
答案 2 :(得分:0)
使用以下更新的代码来解决问题。
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;