btn-group-justify новый эквивалент начальной загрузки. Как?

Question

Следующий HTML-код состоит из 3-х опций радио, которые я хотел бы сделать оправданными. Я пробовал d-flex и старый btn-group-justify.

Возможно, кто-то мог бы уточнить, что мне не хватает. Я хотел бы, чтобы образец начальной загрузки 4.1+ был только если он действительно доступен.

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<!-- SECTION - FLEX - BETWEEN -->
<section class="form-group d-flex justify-content-between px-1 mb-2">
  <!-- COL-12 - CONTAINER -->
  <div class="col-12 px-0">
    <span class="badge rounded-0 w-100 bg-dark text-white mb-0" style="font-size: 1rem;">Paint Quality</span>
    <!-- INPUT-GROUP + BTN-GROUP-TOGGLE -->

      
      <!-- INPUT RADIOS -->
      <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
        <label class="btn rounded-0 btn-lg btn-primary active px-2">
        <input type="radio" class="testclass2" name="paint_quality_option" id="" value="30" autocomplete="off" checked> $30
        </label>
        <label class="btn rounded-0 btn-lg btn-primary px-2">
        <input type="radio" class="testclass2" name="paint_quality_option" id="" value="60" autocomplete="off"> $60
        </label>
        <label class="btn rounded-0 btn-lg btn-primary px-2">
        <input type="radio" class="testclass2" name="paint_quality_option" id="" value="90" autocomplete="off"> $90
        </label>
      </div>


    <span class="badge rounded-0 w-100 bg-dark text-white mb-0" style="font-size: 1rem;">x 1 gl / Basic / Standard / Premium</span>
  </div>
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

Answer 1

Может, ты так хочешь?
Немного изменил ваш код.

<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<!-- SECTION - FLEX - BETWEEN -->
<section class="form-group d-flex justify-content-between px-1 mb-2">
  <!-- COL-12 - CONTAINER -->
  <div class="col-12 px-0">
    <span class="badge rounded-0 w-100 bg-dark text-white mb-0" style="font-size: 1rem;">Paint Quality</span>
    <!-- INPUT-GROUP + BTN-GROUP-TOGGLE -->

      
      <!-- INPUT RADIOS -->
      <div class="btn-group btn-group-toggle d-flex" data-toggle="buttons">
        <button type="radio" class="testclass2 w-100 btn btn-warning" name="paint_quality_option" id="" value="30" autocomplete="off" checked> $30</button>
        <button type="radio" class="testclass2 w-100 btn btn-primary" name="paint_quality_option" id="" value="60" autocomplete="off"> $60</button>
        <button type="radio" class="testclass2 w-100 btn btn-success" name="paint_quality_option" id="" value="90" autocomplete="off"> $90</button>
      </div>


    <span class="badge rounded-0 w-100 bg-dark text-white mb-0" style="font-size: 1rem;">x 1 gl / Basic / Standard / Premium</span>
  </div>
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>