如何防止引导列互相重叠

我正在学习使用引导通过做一个简单的例子，其中我有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/

来源

2016-03-08 Son

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

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

但这又不是真正的生活问题。

编辑：您可能会发现使用虚拟文本生成器比如：lipsum.com。例如：here.

来源

2016-03-08 12:43:59

试试这个CSS在容器下更新的代码word-break:break-all

来源

2016-03-08 12:44:50

使用来解决问题。

div { 
 
    word-wrap: break-word; 
 
}

<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>

来源

2016-03-08 12:47:47

如何防止引导列互相重叠

回答

相关问题