如何防止引導列互相重疊

我正在學習使用引導通過做一個簡單的例子，其中我有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

如何防止引導列互相重疊

回答

相關問題