对包含所有屏幕分辨率的网格的div应用水平滚动

Question

我将屏幕布局划分为两个部分，每个部分都是col-lg-6。我在col-lg-6中放置了一个有6列的网格。对于宽度超过1280px的桌面，网格适合col-lg-6。但低于1280px的屏幕大小，网格超出了第6列的大小。

当屏幕大小减少到1280px以下时，我想对Grid或Grid容器div应用水平滚动。(让我们考虑一下手机屏幕的最小尺寸，最大可达300px(。

我尝试了以下不同的解决方案：

1. 对网格表的td标签应用空白=正常

2. 在网格容器div 中应用表响应类

3. 在网格级应用表响应lg表响应md表响应sm

4. 链接中提供的解决方案https://jsfiddle.net/glebkema/zaazhp2d/.

5. 使用媒体查询将滚动应用于网格容器div，屏幕宽度低于1280px。

   <div class="row col-lg-12">
   <div class="col-lg-6">some asp.net controls </div>
   <div class="col-lg-6">
   <div class="row col-lg-12">
   some asp.net controls 
   </div>
   <div class="row col-lg-12">
   <div class="container">
   <telerik:RadGrid ID="rad1" runat="server" class="table- 
   responsive-sm table-responsive-md table-responsive-lg">
   <%--Grid Template columns --%>
   </telerik:RadGrid>
   </div>
   </div>
   </div>
   

但这些都不起作用。我无法理解我缺少什么CSS样式。我在一些页面中使用了表响应类，它对我很有效，但现在不是了。我最近开始使用bootstrap 4进行响应式设计。

Answer 1

尝试应用以下css进行水平滚动。

.your-grid-container{
overflow-x: scroll;
white-space: nowrap;
}