Question

我在尝试在包含Bootstrap stlye=overflow-y:auto;和row类的div上实现滚动条（即col）时遇到了一个奇怪的问题。

所以基本的问题是：当列并排显示时，为什么滚动条不起作用;当然，我怎样才能使滚动条正常工作。

以下是我为重现问题而创建的plunker： bootstrap nested rows

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

两种情况：

1）滚动条不起作用

如果你对浏览器窗口进行了足够的扩展，那么row下的嵌套<div id="left" class="col-md-6 " >将向左移动 - 并且滚动条不会工作。

2）滚动条工作 如果你进一步缩小浏览器窗口，你会发现我所有的div都会堆叠在一起 - 而滚动条又回来了。

这里是上面的plunker中相同的html网格代码：

＆＃13;

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

＆＃13;

和范围内的CSS：

＆＃13;

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

＆＃13;

Answer 1

你的BYTE bMins = 36; BYTE bMin1 = bMins / 10; BYTE bMin2 = bMins % 10; for .section-left和.section-right导致这种情况发生

在CSS中删除它。

margin-left

Bootstrap网格 - 嵌套的行和列导致div滚动条中断

1 个答案: