Бутстрэп 4 колонки без масонства

Question

Я работаю над макетом столбца начальной загрузки.

Ниже мой код

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-6">Section 1</div>
    <div class="col-6"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
    <div class="col-6"> Section 3</div>
    <div class="col-6"> Section 4</div>
  </div>
</div>

Вы можете видеть Есть четыре раздела, разделенных с помощью col-6, я хочу сделать раздел 3, чтобы перейти к ниже содержания раздела 1. Я знаю, что для этого есть кладка, но можно ли этого достичь без этого?

Пожалуйста, помогите, потому что в отзывчивом, я хотел раздел 2 ниже раздела 1, но в обычном режиме этот макет является то, что мне нужно. я не хочу использовать один и тот же код два раза, скрывая и показывая

html css bootstrap-4

1

Meena Loshini 23 Окт 2019 в 08:29

Answer 1

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

.row{
  display:block;
}
.col-6{
  float:left;
}
.float-right{
  float:right;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-6">Section 1</div>
    <div class="col-6 float-right"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
    <div class="col-6"> Section 3</div>
    <div class="col-6"> Section 4</div>
  </div>
</div>

0

JustCode 23 Окт 2019 в 08:48

Answer 2

Пожалуйста, напишите содержание в одном разделе внутри col-6 и в другом разделе внутри другого col-6

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


<div class="container-fluid">
       <div class="row">
         <div class="col-6">
           <p>section 1</p>
           <p>Section 3 Content.</p>
         </div>
         <div class="col-6">
           <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in.</p>
           <p>Section 4 Content.</p>
         </div>
       </div>
 </div>

-1

Nitha 23 Окт 2019 в 05:42

Answer 3

В Bootstrap есть класс order-*, вам нужно использовать , который . Пожалуйста, проверьте ниже код.

Используйте .order-классы для контроля визуального порядка вашего контента. Эти классы являются адаптивными, поэтому вы можете установить порядок по точке останова (например, .order-1.order-md-2). Включает поддержку от 1 до 12 на всех пяти уровнях сетки.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-6 order-1">Section 1</div>
    <div class="col-6 order-3"> Section 2 Content. Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea animi, vero et ratione asperiores cumque aspernatur. Laudantium dolorum odit culpa maxime officiis aperiam necessitatibus enim eveniet, reprehenderit deserunt molestias in. </div>
    <div class="col-6 order-2"> Section 3</div>
    <div class="col-6 order-4"> Section 4</div>
  </div>
</div>

0

kiranvj 23 Окт 2019 в 08:36

Бутстрэп 4 колонки без масонства

3 ответа

Новые вопросы

html