Bootstrap |同一 div 内的内联元素

Question

我有一个 <div class="col-md-12"></div> 我希望这两个元素保持在 text-align:left 和另一个在右边，但是我想，当在移动视觉中看到 div 时，一个元素不在下方，一个在上方，但对齐我该怎么办？

示例：

<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's Float class，而不仅仅是对齐文本元素。在你的情况下它将是：

<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>

Answer 2

格式使用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 3

您可以使用文本对齐方式：

    <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

Bootstrap |同一 div 内的内联元素

Bootstrap | Inline element inside same div

html

css

mdbootstrap