Bootstrap 4 标签内两段文本左右对齐实现问题求助

你想要的效果是让标签内的两段文本分别左右对齐，像这样：

Text1 Text2 #

| | #

你尝试的代码思路其实已经很正确了，不过有个小细节需要调整，才能让效果正常生效。先看看你原来的代码：

<div class="row">
  <div class="col">
    <div class="form-group">
      <label for="res-add-1">
        <div class="d-flex justify-content-between">
          <div>Text1</div>
          <div>Text2</div>
        </div>
      </label>
      <input type="text" class="form-control form-control-sm" id="res-add-1">
    </div>
  </div>
</div>

问题出在<label>元素上——默认它是行内元素，宽度只会被内容撑开，这就导致里面的d-flex justify-content-between容器没有足够的横向空间来把两个子元素分别推到左右两端。

只需要给<label>加上Bootstrap的w-100类（让它占满父容器的100%宽度），就能解决这个问题了。修改后的代码如下：

<div class="row">
  <div class="col">
    <div class="form-group">
      <label for="res-add-1" class="w-100">
        <div class="d-flex justify-content-between">
          <div>Text1</div>
          <div>Text2</div>
        </div>
      </label>
      <input type="text" class="form-control form-control-sm" id="res-add-1">
    </div>
  </div>
</div>

这样调整后，label会占满父容器的宽度，里面的flex布局就能正常工作，Text1会靠左对齐，Text2靠右对齐，正好符合你想要的效果~

内容的提问来源于stack exchange，提问作者Lakmal Premaratne