Bootstrap 4 два столбца не выравниваются подряд - PullRequest
Новая
       19

Bootstrap 4 два столбца не выравниваются подряд

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

Я создал форму входа с bootstrap 4. У меня два col-md-6 столбца подряд для 1. запомни меня 2. забыл пароль. но в мобильном забытый пароль спрыгивает с ряда. Я не понимаю, почему? Есть идеи? спасибо.

вот скриншот:

enter image description here

<div class="row">
      <div class="col-md-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-md-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </div>
    </div>

Ответы [ 3 ]

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

вы использовали col-md-6 для планшетного устройства (768px - 992px)

, но по умолчанию ваш div будет col-12 в мобильном (0 - 576px)

, поэтому вы можете добавить свою собственную сетку для мобильных устройств

например: первый div: class="col-4" второй div: class="col-8"

<div class="row">
      <div class="col-6 col-md-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-6 col-md-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </div>
</div>
0 голосов
/ 10 марта 2020

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

<div class="row">
      <div class="col-6 text-left">
        <label class="custom-control custom-checkbox custom-control-inline">
            <input type="checkbox" checked="" class="custom-control-input"><span class="custom-control-label">Remember me</span>
        </label>                  
      </div>
      <div class="col-6 text-right">
        <a href="#" class="text-primary">forgot password?</a>
      </div>
    </div>

. Подробнее о сетках bootstrap можно прочитать: https://getbootstrap.com/docs/4.4/layout/grid/

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

Если вы используете v4 из bootstrap (что ваши теги говорят, что вы используете), то вы можете просто сделать следующее: 

<div class="row">
 <div class="col">
   content 
 </div>
 <div class="col">
   content 
 </div>
</div>

Документация для сетки v4

...