Горизонтальная прокрутка только в правом столбце - PullRequest
Новая
       17

Горизонтальная прокрутка только в правом столбце

0 голосов
/ 13 июня 2018

Я нашел пример кода, который делает то, что я хочу.Мне нужно, чтобы левый столбец типичного макета Bootstrap оставался фиксированным и разрешал только вертикальную прокрутку, в то время как правый столбец содержит неограниченное количество карточек, все прокручиваются горизонтально.Проблема в том, что горизонтальная прокрутка хочет занять экран ввода, прокручивая верхнюю часть моего левого списка.

enter image description here

Как мне сделать этопрокручивать только в правом столбце?

CodePen здесь: https://codepen.io/anon/pen/JZJOgK

<div class="container-fluid">
  <div class="row">
    <div id="left" class="col-lg-2">
      <div class="card card-block">list</div>
    </div>
    <div id="right" class="col offset-lg-2">

      <div class="row flex-row flex-nowrap">
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
               <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="card card-block">Card</div>
                </div>
            </div>

    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 13 июня 2018

Скрыть переполнение на теле и включить его (overflow-x:auto) в правом столбце ... 

body {
  overflow-x:hidden;
}

#right {
  background-color: white;
  padding-left:25px;
  overflow-x:auto;
}

https://codepen.io/anon/pen/yEXpPy

...