Как выровнять столбцы начальной загрузки по правому краю?

#css #twitter-bootstrap #bootstrap-4

Вопрос:

Отказ от ответственности: Я не эксперт по Bootstrap для CSS некоторые термины, которые я использую в этом вопросе, могут отличаться, не стесняйтесь комментировать, чтобы я мог их скорректировать.

Основываясь на сеточной системе Bootstrap, строки содержат столбцы, выровненные по левому краю: ведет себя float: left следующим образом. Есть ли способ выровнять их по правому краю? Я попытался добавить встроенные float: right стили, но это не сработало.

Для получения более подробной информации вот чего я пытаюсь достичь. У меня есть 2 столбца (colA и ColB). На широких экранах (например, ноутбуках) Я хочу показать colA слева, а ColB справа. Благодаря Bootstrap, когда экран достаточно маленький, colA отображается поверх ColB, и это здорово.

В моем случае я пытаюсь показать ColB поверх colA на мобильных устройствах (или на небольших экранах), сохраняя его справа для широких экранов. Есть ли способ сделать это?

Ответ №1:

Что вам нужно, так это утилита Order, а также justify-content-end

Как вы можете видеть в примере ниже row , это блок отображения на маленьких экранах, но затем становится flex sm точкой останова.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="d-block flex-nowrap justify-content-end d-sm-flex">
  <div class="order-2 p-2">First flex item</div>
  <div class="order-1 p-2">Second flex item</div>
</div>

Развернуть фрагмент

1. Большое спасибо! Это именно то, что я искал. Также для совместимости с сеточной системой я внес следующие изменения, не стесняйтесь редактировать свой ответ: « lang-html <link rel=»таблица стилей» href=» stackpath.bootstrapcdn.com/bootstrap/4.5.2/css /… » целостность=»sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z» crossorigin=»анонимный»> <класс div=»строка d-block flex-nowrap right-content-end d-sm-flex»> <div class=»col-md-6 order-2 p-2″>Первый элемент flex</div> <div class=»col-md-6 order-1 p-2″> Второй гибкий элемент </ div> </ div> «

2. Я не знаю, почему форматирование не работает, но, надеюсь, после копирования / вставки вы сможете увидеть минимальные изменения, которые я внес

Ответ №2:

Попробуйте float-right

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

<div class="row">
     <div class="col">left</div>
     <div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

Развернуть фрагмент