Примените горизонтальную прокрутку к div, содержащему сетку для всех разрешений экрана

Question

Я разделил разметку экрана на две части, каждая из которых называется col-lg-6. Я поместил сетку с 6 столбцами внутри col-lg-6. Для рабочего стола размером более 1280 пикселей Grid правильно вписывается в col-lg-6. Но при размере экрана ниже 1280 пикселей Grid превышает размер col-6. Я хочу применить горизонтальную прокрутку к элементу сетки или контейнера Grid, когда размер экрана уменьшается ниже 1280 пикселей (давайте рассмотрим минимальный размер экрана мобильного устройства до 300 пикселей).

Я пробовал различные решения следующим образом: 1. Примените белый -space = normal для тега td таблицы Grid 2. Примените класс реагирования на таблицы в div контейнера Grid 3. Примените table-responseive-lg table-responseive-md table-responseive-sm на уровне сетки 4. Решение, предоставленное по ссылке https://jsfiddle.net/glebkema/zaazhp2d/. 5. Примените прокрутку к div контейнера Grid с помощью медиазапроса для ширины экрана ниже 1280 пикселей.

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

Но ничего из этого не сработало. Я не могу понять, какой стиль мне не хватает. Я использовал таблично-адаптивный класс на некоторых страницах, и он работал для меня, но здесь это не так. Недавно я начал использовать bootstrap 4 для адаптивных дизайнов.

Любые предложения или идеи. Пожалуйста, помогите мне. Я прибегаю к помощи с последних нескольких дней.

Заранее спасибо.

Answer 1

Попробуйте применить ниже css для горизонтальной прокрутки.

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