如何调整Bootstrap页面单选框布局实现同组并排、不同组分行显示

DevOps 小满
2026-10-2
单选框布局修复方案
问题原因

原代码中包裹两组单选框的外层container默认是横向flex布局，导致两组单选框挤在同一行；每组单选框的父容器未开启flex布局，所以组内选项上下堆叠。
修改要点

仅需调整3处布局代码即可实现需求：
给包裹两组单选框的外层container容器添加flex-column类，将flex布局方向改为纵向，保证两组单选框各自占独立行
给外层容器加少量行间距提升展示美观度
给每组单选框的父div添加d-flex类，开启横向flex布局，让组内两个单选框并排展示
完整修复后代码

<!doctype html>
<html lang="en">
  <head>
        <title>Title</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <style>
            .small-img-group {
            display: flex;
            justify-content: space-between;
            }

            .small-img-col {
            flex-basis: 24%;
            cursor: pointer;
            }

            .counter1 {
            float: left;
            display: flex;
            justify-content: space-between;
            overflow-x: hidden;
            overflow-y: hidden;
            }

            .counter2 {
            float: left;
            display: flex;
            justify-content: space-between;
            overflow-x: hidden;
            overflow-y: hidden;
            padding-left: 15px;
            }

            .up,
            .down {
            display: inline-block;
            color: rgb(0, 0, 0);
            font-size: 20px;
            margin: 1px 1px;
            cursor: pointer;
            width: 15px;
            line-height: 14px;
            height: 16px;
            text-align: center;
            font-weight: bold;
            border: 1px solid #000;
            user-select: none;
            }

            .up:hover,
            .down:hover {
            color: #fd0b3f;
            text-align: center;
            }

            .adults {
            padding-right: 5px;
            }

            .children {
            padding-right: 5px;
            }

            input {
            appearance: none;
            height: 21px;
            text-align: center;
            width: 42px;
            line-height: 24px;
            font-size: 15px;
            border-radius: 5px;
            }

            .container {
            display: flex;
            }

            input[type="radio"] {
            display: none;
            }

            label[for=private] {
            position: relative;
            color: orangered;
            font-size: 20px;
            border: 2px solid orangered;
            border-radius: 5px;
            align-items: left;
            display: flex;
            cursor: pointer;
            margin-right: 10px;
            }

            label[for=shared] {
            position: relative;
            color: orangered;
            font-size: 20px;
            border: 2px solid orangered;
            border-radius: 5px;
            align-items: left;
            display: flex;
            cursor: pointer;
            }
            label[for=withatv] {
            position: relative;
            color: orangered;
            font-size: 20px;
            border: 2px solid orangered;
            border-radius: 5px;
            align-items: left;
            display: flex;
            cursor: pointer;
            margin-right: 10px;
            }

            label[for=withoutatv] {
            position: relative;
            color: orangered;
            font-size: 20px;
            border: 2px solid orangered;
            border-radius: 5px;
            align-items: left;
            display: flex;
            cursor: pointer;
            }

            input[type="radio"]:checked+label {
            background-color: orangered;
            color: white;
            }

            input[type="radio"]:checked+label:before {
            height: 16px;
            width: 16px;
            border: 10px solid white;
            background-color: orangered;
            }
        </style>
        
  </head>
  <body>
    <section class="container sproduct my-5 pt-5">
        <div class="row mt-5">
          <div class="col-lg-5 col-md-12 col-12">
            <img class="img-fluid w-100 pb-1" src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" alt="" id="MainImg" width="450">
      
            <div class="small-img-group">
              <div class="small-img-col">
                <img src="https://media.tacdn.com/media/attractions-splice-spp-674x446/09/99/99/87.jpg" width="100%" class="small-img" alt="">
              </div>
              <div class="small-img-col">
                <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
              </div>
              <div class="small-img-col">
                <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
              </div>
              <div class="small-img-col">
                <img src="https://skylandtourism.com/wp-content/uploads/2018/03/Morning-Safari.jpg" width="100%" class="small-img" alt="">
              </div>
            </div>
          </div>
          <div class="col-lg-6 col-md-12 col-12">
            <h6>Home / Morning Safari</h6>
            <h3>Morning Safari</h3>
            <h2><label> Total AED:</label><label id="totalPrice"class="total Price"></label></h2>
            <div class="counter1">
              <Label class="Adults">Adults</Label>
              <div class='down' onclick='decreaseCount(event, this)'>-</div>
              <input id="adults" type='text' value='1' readonly>
              <div class='up' onclick='increaseCount(event, this)'>+</div>
            </div>
            <div class="counter2">
              <Label class="Children">Children</Label>
              <div class='down' onclick='decreaseCount2(event, this)'>-</div>
              <input id="children" type='text' value='0' readonly>
              <div class='up' onclick='increaseCount(event, this)'>+</div>
            </div>
            <div class="container flex-column" style="padding-left: 0;padding-top: 5px;row-gap: 10px;">
              <div class="d-flex">
                <input type="radio" name="occupancy" id="private" checked="checked" onclick="updateTotal()">
                <label for="private">Private</label>
                <input type="radio" name="occupancy" id="shared" onclick="updateTotal()">
                <label for="shared">Shared</label>
              </div>
              <div class="d-flex">
                <input type="radio" name="atv" id="withatv" checked="checked" onclick="updateTotal()">
                <label for="withatv">With ATV</label>
                <input type="radio" name="atv" id="withoutatv" onclick="updateTotal()">
                <label for="withoutatv">Without ATV</label>
              </div>
              
            </div> 
      
          </div>
        </div>
      </section>
      
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script>
             
            function increaseCount(e, el) {
                var input = el.previousElementSibling;
                var value = parseInt(input.value, 10);
                value = isNaN(value) ? 0 : value;
                value++;
                input.value = value;
                updateTotal();
            }

            function decreaseCount(e, el) {
            var input = el.nextElementSibling;
            var value = parseInt(input.value, 10);
            if (value > 1) {
                value = isNaN(value) ? 0 : value;
                value--;
                input.value = value;
                updateTotal();
            }
            }

            function decreaseCount2(e, el) {
            var input = el.nextElementSibling;
            var value = parseInt(input.value, 10);
            if (value > 0) {
                value = isNaN(value) ? 0 : value;
                value--;
                input.value = value;
                updateTotal();
            }
            }

            var MainImg = document.getElementById('MainImg');
            var smallimg = document.getElementsByClassName('small-img');

            smallimg[0].onclick = function() {
            MainImg.src = smallimg[0].src;
            }
            smallimg[1].onclick = function() {
            MainImg.src = smallimg[1].src;
            }
            smallimg[2].onclick = function() {
            MainImg.src = smallimg[2].src;
            }
            smallimg[3].onclick = function() {
            MainImg.src = smallimg[3].src;
            }

            function calculateTotal() {
              const privateAdultPrice = 100;
              const sharedAdultPrice = 40;
              const privateChildrenPrice = 50;
              const sharedChildrenPrice = 30;

              const withAtvAdultPrice = 100;
              const withAtvChildrenPrice = 80;

              const noAtvPrice = 0;

              const adults = +document.querySelector('#adults').value;
              const children = +document.querySelector('#children').value;

              const isPrivate = document.getElementById('private').checked;
              const isWithAtv = document.getElementById('withatv').checked;
              
              const adultTripPrice = isPrivate ? privateAdultPrice : sharedAdultPrice;
              const childrenTripPrice = isPrivate ? privateChildrenPrice : sharedChildrenPrice;
              const adultVehiclePrice = isWithAtv ? withAtvAdultPrice : noAtvPrice;
              const childrenVehiclePrice = isWithAtv ? withAtvChildrenPrice : noAtvPrice

              const adultPrice = adults * (adultTripPrice + adultVehiclePrice)
              const childrenPrice = children * (childrenTripPrice + childrenVehiclePrice)

              return adultPrice + childrenPrice;
            }
            function updateTotal() {
              const total = calculateTotal();
              console.log(total);
              document.querySelector('#totalPrice').innerHTML = total;
            }
            updateTotal();

        </script>
    </body>
</html>
内容的提问来源于stack exchange，提问作者MMunir. Asif
如何调整Bootstrap页面单选框布局 实现同组并排、不同组分行显示

问题原因 #

修改要点 #

完整修复后代码 #

如何调整Bootstrap页面单选框布局实现同组并排、不同组分行显示

问题原因

修改要点

完整修复后代码
