2015-07-01 63 views
0

我有一個奇怪的問題,努力實現在包含了引導rowcol類的div滾動條(即stlye=overflow-y:auto;)。引導格 - 嵌套行和cols導致DIV滾動條來打破

所以基本的問題是:爲什麼當並排顯示列時滾動條不工作;當然,我怎樣才能讓滾動條正常工作。

這裏是我創建重現該問題的plunker: bootstrap nested rows

http://plnkr.co/edit/14FxGzuAZoiCkjPYiYil?p=preview 

兩種方案:

1)滾動條不工作

如果您擴大了瀏覽器窗口,然後嵌套row<div id="left" class="col-md-6 " >將泛向左 - 滾動條不起作用。

2)滾動條工作 如果縮小瀏覽器窗口。此外,你會看到我的所有div會疊加在彼此的頂部 - 和滾動條後工作。

下面是在上面的plunker相同的HTML代碼電網:

<div class="container"> 
 
<div class="row" > 
 
    <div id="left" class="col-md-6 " > 
 
\t <div class="row"> 
 
\t \t <div class="col-md-12 section-left"> 
 
\t \t \t \t <strong>First Column, First Cell</strong> 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t </div> 
 
\t \t <div class="col-md-12 section-left"> 
 
\t \t \t \t <strong>Second Column, First Cell</strong> 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t \t with more text...with more text...with more text... 
 
\t \t \t </div> 
 
\t </div> 
 
    </div> 
 
    <div id="right" class="col-md-6"> 
 
\t <div class="row"> 
 
\t \t <div class="col-md-12 section-right" > 
 
\t \t \t Second Column, First Cell...Second Column, First Cell...Second Column, First Cell...      
 
\t \t </div> 
 
\t \t <div class="col-md-12 section-right"> 
 
\t \t \t Second Column, Second Cell 
 
\t \t </div> 
 
\t \t <div class="col-md-12 section-right"> 
 
\t \t \t Second Column, Third Cell 
 
\t \t </div> 
 
\t </div> 
 
    </div> 
 
</div> 
 
</div>

和範圍的CSS:

<style scoped> 
 
    
 
    
 
    .section-left { 
 
     height:100px;border:1px solid; margin-left: 15px; overflow-y:auto; 
 
    } 
 
    .section-right { 
 
     height:100px;border:1px solid; margin-left: 15px; overflow-y:auto; 
 
    } 
 
</style>

回答

2

ÿ我們的margin-left爲.section-left和.section-right導致這種情況發生

在您的CSS中刪除此項。

margin-left: 15px;