Текст внутри bootstrap группы списка `a` не выравнивается по правому краю

Question

Я пытался выровнять часть текста по правому краю, а остальную часть по левому краю группы bootstraplist, но все всегда выровнено по левому краю, Я пытался сделать текст «Dra go» по левому краю, и смайлики в левом конце каждой строки

<div class="container-fluid">
    <div class="row d-flex justify-content-center">
      <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<div class="list-group shadow">
{% for newsletter in newsletter_list %}

    <a href="{{newsletter.slug}}" class="list-group-item list-group-item-action">
            <span class="float-left">?</span>
            <span class="float-right">Drago</span>
        </a>
 
{% endfor %}
</div>
</div>
</div>

Answer 1

Вы можете просто использовать d-flex и justify-content-between в своих элементах a. Это будет pull text справа, а также responsive в современных браузерах .

Я не отдам, используя float-right или float-left - использование классов гибкости намного лучше для отзывчивости.

Демо:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row d-flex justify-content-center">
    <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
      <div class="list-group shadow">
        <a href="{{newsletter.slug}}" class="d-flex justify-content-between list-group-item list-group-item-action">
          <span class="">?</span> 
          <span class="">Drago</span> 
        </a>
      </div>
      <div class="list-group shadow">
        <a href="{{newsletter.slug}}" class="d-flex justify-content-between list-group-item list-group-item-action">
          <span class="">?</span>. 
          <span class="">Drago</span> 
        </a>
      </div>
    </div>
  </div>

Answer 2

Попробуйте использовать class = "pull-left" вместо class = "float-left"

<div class="container-fluid">
    <div class="row d-flex justify-content-center">
      <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<div class="list-group shadow">
{% for newsletter in newsletter_list %}

    <a href="{{newsletter.slug}}" class="list-group-item list-group-item-action">
            <span class="pull-left">?</span>
            <span class="pull-right">Drago</span>
        </a>
 
{% endfor %}
</div>
</div>
</div>