Сложные столбцы Bootstrap на мобильный - PullRequest
Новая
       57

Сложные столбцы Bootstrap на мобильный

0 голосов
/ 25 апреля 2018

у меня есть этот столбец с рабочего стола 

|      col-lg-5       | col-lg-2 | | col-lg-2 | | col-lg-2 |

как сделать на мобиле 

|            col-sm-12           |
| col-sm-4 | col-sm-4 | col-sm-4 |

я пытаюсь с этим 

<div class="col-sm-12 col-md-12 col-lg-5">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>
<div class="col-xs-4 col-sm-4 col-md-2 col-lg-2">
   xxx
</div>

но на мобильном дисплее 

|   col-12   |
|   col-12   |
|   col-12   |
|   col-12   |

Ответы [ 2 ]

0 голосов
/ 25 апреля 2018

Вы должны определить систему сетки начальной загрузки внутри .row, и тогда у вас появятся сетки на странице.

Попробуйте это в своем коде, 

<div class="row">
  <div class="col-12 col-sm-12 col-md-5">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
</div>

Примечание: В версии Bootstrap 4.0 удален .col-xs класс. Проверка доступных классов .

А вот и фрагмент, 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div class="row">
  <div class="col-12 col-sm-12 col-md-5">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
  <div class="col-4 col-sm-4 col-md-2">
    xxx
  </div>
</div>
0 голосов
/ 25 апреля 2018

Вместо использования col-sm-4 или col-xs-4, вы должны использовать col-4, что означает, что вы хотите, чтобы оно охватывало 4 столбца не только для области просмотра между sm и md или xs и md, но и для всех областей просмотра вплоть до md.Сделайте это так. 

<div class="row">
    <div class="col-12 col-lg-5">
        xxx
    </div>
    <div class="col-4 col-md-2 col-lg-2">
       xxx
    </div>
    <div class="col-4 col-md-2 col-lg-2">
       xxx
    </div>
    <div class="col-4 col-md-2 col-lg-2">
       xxx
    </div>
</div>

Вам не нужно писать col-sm-12 col-md-12 col-lg-5, достаточно просто написать col-sm-12 col-lg-5.Точно так же и для других div'ов.

...