Question

以下HTML代码由3个单选选项组成，我希望使它们显得合理。我尝试了d-flex和旧的btn-group-justify。

也许有人可以澄清我所缺少的。如果只提供一个Bootstrap 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>

btn-group-justify新的引导程序等效项。怎么样？

1 个答案: