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

Posted 2021-03-19

我将屏幕布局分为两部分，每部分为col-lg-6.我在col-lg-6中放置了一个有6列的网格，对于桌面尺寸大于1280px的宽度，网格可以正确地放入col-lg-6中，但是低于1280px的屏幕尺寸，网格就超出了col-6的尺寸。我想在屏幕尺寸小于1280px时，对网格或网格容器的div进行水平滚动，（让我们考虑到手机屏幕的最小尺寸为300px）。

我已经尝试了以下不同的解决方案：1. 在Grid table的td标签上应用white-space=normal2. 在Grid容器的div上应用table-responsive类3. 在 Grid level 应用 table-responsive-lg table-responsive-md table-responsive-sm4. 链接中提供的解决方案 https:/jsfiddle.netglebkemazaazhp2d。.5. 使用媒体查询对屏幕宽度低于1280px的Grid容器div应用滚动。

    <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样式.我已经在一些页面中使用了table-responsive类，它为我工作，但在这里它不是.我最近开始使用bootstrap 4进行响应式设计。

任何建议或想法.请帮助我。我已经从过去的几天去谷歌它。

先谢谢你。

答案

试着应用下面的css进行水平滚动。

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