сетка принимает новый ряд в bootstrap - PullRequest
Новая
       5

сетка принимает новый ряд в bootstrap

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

Я создал Grid, но на рабочем столе он показывает 2 строки, как на изображении, На экране телефона он подходит идеально. Вот код 

<div class="row">
        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6">
            <h3>test 1</h3>
        </div>
        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6">
            <h3>test2</h3>
        </div>
        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6">
            <h3>test3</h3>
        </div>
        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6">
            <h3>test4</h3>
        </div>
    </div>

введите описание изображения здесь

1 Ответ

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

Попробуйте реализовать таким образом. вам нужно больше узнать о bootstrap структуре сетки.

col-**-** классы сетки могут измениться в bootstrap 4.

в Bootstrap -3 существует 4 типа col-**-** классы lg, md, sm, xs соответственно ширине устройства >1199px, >991px, >767px, <767px.

и в Bootstrap -4 также есть 4 типа col-**-** классы xl, lg, md, sm, но ширина устройства изменяется для типа классов. соответственно ширина устройства >1199px, >991px, >767px, >575px. Вы можете использовать col-** классы для экранов устройства <= 575px в Bootstrap -4. 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <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">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-6">
        <h3>test 1</h3>
      </div>
      <div class="col-sm-3 col-6">
        <h3>test2</h3>
      </div>
      <div class="col-sm-3 col-6">
        <h3>test3</h3>
      </div>
      <div class="col-sm-3 col-6">
        <h3>test4</h3>
      </div>
    </div>
  </div>
</body>
</html>

Надеюсь, это будет хорошо для вас.

Спасибо ...

...