html - 如何让 5 行引导网格占据整个窗口？

Question

我试图让我的 Bootstrap 元素有 5 行并占据整个宽度，但我在理解如何执行此操作时遇到问题...

这段代码:

<div class="row car-list btn-group" style="border: 1px solid red">
<label class="car-image pr-0 col-lg-2 col-xs-1" style="border: 1px solid red">
    <div class="ml-0">
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
        <img src="images/form-cars/1.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-lg-2 col-xs-3" style="border: 1px solid red">
    <div>
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-travel" autocomplete="off" data-class="travel" value="travel" onclick="getpricing();"> Travel Car<br>(2014 - 2020 Toyota Corolla)
        <img src="images/form-cars/2.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-lg-2 col-xs-3" style="border: 1px solid red">
    <div class="ml-3 ml-md-2">
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-suv" autocomplete="off" data-class="suv" value="suv" onclick="getpricing();"> SUV<br>(2016 - 2020 Dodge Journey)
    <img src="images/form-cars/3.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-lg-2 col-xs-3" style="border: 1px solid red">
    <div>
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-minivan" autocomplete="off" data-class="minivan" value="minivan" onclick="getpricing();"> Minivan<br>(2016 - 2020 Toyota Sienna)
    <img src="images/form-cars/4.png" alt="">
    </div>
</label>

<label class="car-image pr-0 col-lg-2 col-xs-2" style="border: 1px solid red">
    <div>
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-convert" autocomplete="off" data-class="convert" value="convert" onclick="getpricing();"> Convertible<br>(2015 - 2017 Ford Mustang)
    <img src="images/form-cars/5.png" alt="">
    </div>
</label>
</div>

结果:

还有这段代码:

<div class="row car-list btn-group" style="border: 1px solid red">
<label class="car-image pr-0 col-6 col-md-3" style="border: 1px solid red">
    <div class="ml-0">
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-local" autocomplete="off" data-class="local" value="local" onclick="getpricing();" required> Local Car<br>(2007 - 2012 Toyota Corolla)
        <img src="images/form-cars/1.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-6 col-md-3" style="border: 1px solid red">
    <div>
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-travel" autocomplete="off" data-class="travel" value="travel" onclick="getpricing();"> Travel Car<br>(2014 - 2020 Toyota Corolla)
        <img src="images/form-cars/2.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-6 col-md-3" style="border: 1px solid red">
    <div class="ml-3 ml-md-2">
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-suv" autocomplete="off" data-class="suv" value="suv" onclick="getpricing();"> SUV<br>(2016 - 2020 Dodge Journey)
    <img src="images/form-cars/3.png" alt="">
    </div>
</label>

<label class="car-image px-0 col-6 col-md-3" style="border: 1px solid red">
    <div>
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-minivan" autocomplete="off" data-class="minivan" value="minivan" onclick="getpricing();"> Minivan<br>(2016 - 2020 Toyota Sienna)
    <img src="images/form-cars/4.png" alt="">
    </div>
</label>

<label class="car-image pr-0 col-6 col-md-3" style="border: 1px solid red">
    <div>
        <input type="radio" name="car-rental-class" class="required" id="car-rental-class-convert" autocomplete="off" data-class="convert" value="convert" onclick="getpricing();"> Convertible<br>(2015 - 2017 Ford Mustang)
    <img src="images/form-cars/5.png" alt="">
    </div>
</label>
</div>

结果:

我想要的是表格有 5 个相等的行，占据整个宽度。建议？正确执行此操作的建议方法是什么？

编辑:我想在第二个示例中保留 col-6 提供的移动功能。

Answer 1

只需删除数字并尝试这样的操作:<div class="col-md col-6">

它将在桌面设备上生成相等的列，在移动设备上每行生成两个元素。

例子: https://www.bootply.com/NgisB4j3qG