Как создать загрузочную сетку с одним столбцом вверху и двумя снизу? - PullRequest
Новая
       24

Как создать загрузочную сетку с одним столбцом вверху и двумя снизу?

0 голосов
/ 10 июня 2019

Я спрашиваю: как я могу преобразовать сетку начальной загрузки с тремя столбцами в настольной версии, одним столбцом выше и двумя ниже в мобильной версии?

Я уже много чего перепробовал безуспешно ...

enter image description here

Ответы [ 5 ]

1 голос
/ 10 июня 2019 

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>

  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
 </head>
 <body>
  

<div class="container-fluid">
	<div class="row">
    <div class="col-12 col-sm-4 text-center">
		<h1>1</h1>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <h1>2</h1>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <h1>3</h1>
    </div>
  </div>
</div>



 </body>
</html>

Подробнее о сетке начальной загрузки 4

сетка начальной загрузки 4

1 голос
/ 10 июня 2019 
<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-md-4">Box1</div>
        <div class="col-xs-6 col-sm-4 col-md-4">Box2</div>
        <div class="col-xs-6 col-sm-4 col-md-4">Box3</div>
    </div>
</div>

Объяснение

Bootstrap позволяет разместить до 12 столбцов на странице.

Здесь для устройств XS, таких как мобильный телефон, кнопка / виджет должна занимать все 12 сеток, так что в каждой строке есть только 1 кнопка / виджет, следовательно, col-xs-12.

Поскольку рабочий стол может быть средним устройством, виджет / кнопка 3 должен охватывать всю страницу, поэтому значение col-md-4.

Надеюсь, это поможет.

1 голос
/ 10 июня 2019

Изменение на экране мобильного телефона col-6 последние два деления и первое col-12, col-xs-* были отброшены в Bootstrap 4 в пользу col-*

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-4 text-center">
      <p>1</p>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <p>2</p>
    </div>
    <div class="col-6 col-sm-4 text-center">
      <p>3</p>
    </div>
  </div>
</div>
1 голос
/ 10 июня 2019

это для начальной загрузки 4 

<div class="container">
  <div class="row">
    <div class="col-12 col-sm-12 col-md-4">Box 1</div>
    <div class="col-6 col-sm-6 col-md-4">Box 2</div>
    <div class="col-6 col-sm-6 col-md-4">Box 3</div>
  </div>
</div>
1 голос
/ 10 июня 2019

Вы можете попробовать это: 

<div class="row">
   <div class="col-md-4 col-sm-12 col-xs-12"></div>
   <div class="col-md-4 col-sm-6 col-xs-6"></div>
   <div class="col-md-4 col-sm-6 col-xs-6"></div>
</div>

Подробнее о Сетка начальной загрузки

...