Bootstrap | Встроенный элемент внутри того же div

Question

у меня есть <div class="col-md-12"></div> я хочу, чтобы два элемента оставались на текстовом выравнивании: слева и еще один вправо, но я хочу, чтобы, когда div виден в мобильном видении, элемент не go ниже и один выше, но выровнены, как я могу сделать?

пример:

<div class="col-md-12">
    <p style="text-align: left;" id="element_one">1</p>
    <p style="text-align: right;" id="element_two">1</p>
</div>

Answer 1

формат с использованием bootstrap сеточная структура

    <div class="row">
        <div class="col-6 text-left">
            <p id="element_one">1</p>
        </div>
        <div class="col-6 text-right">
            <p  id="element_two">1</p>
        </div>
    </div>

Answer 2

Вы можете использовать выравнивание текста:

    <div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 text-left">
      Left content
    </div>
    <div class="col-sm-6 text-right">
      Right content
    </div>
  </div>
</div>

Здесь вы можете найти больше информации и примеров: https://mdbootstrap.com/docs/jquery/utilities/text/#text -alignment

Answer 3

Вам нужно использовать Bootstrap класс Float , а не просто выравнивание текстового элемента. В вашем случае это будет:

<div class="row">
    <div class="col-md-6" style="background-color: aqua">
        <span class="float-md-left">1</span>
    </div>
    <div class="col-md-6" style="background-color: palevioletred">
        <span class="float-md-right">2</span>
    </div>
</div>

Живой пример:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-6" style="background-color: aqua">
      <span class="float-sm-left">1</span>
    </div>
    <div class="col-sm-6" style="background-color: palevioletred">
      <span class="float-sm-right">2</span>
    </div>
  </div>
</div>