Bootstrap, получая два элемента для смены сторон - PullRequest
Новая
       25

Bootstrap, получая два элемента для смены сторон

0 голосов
/ 29 февраля 2020

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

Итак, у меня есть два элемента типа: 

<div class="one col-lg-6">
    <p>One</p>
</div>

<div class="two col-lg-6">
    <p>Two</p>
</div>

Так что Two, конечно, будет отображаться в виде правого столбца

Ранее, если бы я хотел заставить их поменяться сторонами, я бы просто плавал 'One' вправо и «Два» слева.

Но это больше не работает (что-то связанное с Flexbox, я думаю?) ... и я прочитал, что установка автоматических полей может использоваться вместо плавающих элементов.

Тем не менее, я попробовал следующее, и оба div остались такими же: 

.one {
    margin-left: auto;
}

.two {
    margin-right: auto;
}

Есть ли обходной путь для этого без изменения разметки?

1 Ответ

1 голос
/ 29 февраля 2020

Я не знаю, есть ли решение, нативное для bootstrap, но вы определенно можете использовать для этого свойство flex-direction: row-reverse;.

Посмотрите на фрагмент ниже: 

.row-reverse {
  flex-direction: row-reverse;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row row-reverse">
  <div class="one col-6">
    <p>One</p>
  </div>

  <div class="two col-6">
      <p>Two</p>
  </div>
</div>
...