btn组证明了新的bootstrap等价物的合理性.如何

Question

下面的HTML代码由3个单选选项组成，我想让它看起来合理。我试过d-flex和旧的btn小组证明。

也许有人可以澄清我遗漏了什么。如果确实有可用的话，我想要一个仅限引导程序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>