Flex на SM, но не на XS - PullRequest
Новая
       4

Flex на SM, но не на XS

1 голос
/ 06 марта 2020

У меня есть следующее HTML: 

<div class="d-sm-flex flex-sm-row flex-sm-row-reverse">
   <div class='ml-2'></div>
   <div class='ml-2'></div>
   <div class='ml-2'></div>
</div>

Что работает как задумано, однако в режиме XS я хочу отображать столбцы как обычно. Но если я установлю классы div на col ml-2, это разрушит гибкое отображение. Как я могу установить это для отображения cols в XS, но flex в SM и выше?

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Пожалуйста, попробуйте это. 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="d-flex flex-row-reverse">
   <div class='col ml-2'>11</div>
   <div class='col ml-2'>22</div>
   <div class='col ml-2'>33</div>
</div>
<div class=" d-flex  flex-row-reverse">
   <div class='ml-2'>44</div>
   <div class='ml-2'>55</div>
   <div class='ml-2'>66</div>
</div>
</body>
</html>
0 голосов
/ 06 марта 2020

Итак, на основе вашего комментария вы можете сделать следующее: 

<div class="container">
  <div class="row">
     <div class='col-4 col-sm-12 ml-2'>TEST</div>
     <div class='col-4 col-sm-12 ml-2'>TEST</div>
     <div class='col-4 col-sm-12 ml-2'>TEST</div>
  </div>
</div>

Я использовал Bootstrap * row и col и поместил все это в container. Но концепция для столбцов заключается в том, что для размеров до sm это будет col-4 (вы можете изменить размеры столбца по своему желанию), а для всего, что после sm, будет col-12, то есть заполнится ширина.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...