Как сделать прокрутку строки (переполнение) по оси X при достижении максимальной ширины

Question

Я хочу, чтобы при превышении максимальной ширины он мог прокручиваться.Я попытался установить ширину на 100% и overflow-x: auto и white-space: nowrap, как описано в других статьях stackoverflow, но это не работает для начальной загрузки col.я также попытался использовать flex и flex overflow, а также попытался добавить контейнер-жидкость, но он все еще имеет тот же результат, хотя полоса прокрутки показывает, но не может прокрутить

Для моего текущего вывода, если col больше 18, это будетразбить и перейти на новую строку, что не то, что я хочу, я хочу, чтобы он мог прокручивать вместо этого разбивать строку на новую строку

<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9">
   <div class="container-fluid p-0">
      <div  style="width:100%; overflow-x:auto; white-space: nowrap;">
         <form id="TICKETSALE_ORDERTICKETSELECTSEATFORM" action="TICKETSALE_ORDERTICKETSELECTSEATFORM.php" method="POST">
            <div class="row row-eq-height mb-4 px-2 py-2" style="background-color:purple; height:40px;">
               <div class="col-sm-12" align="center">
                  <div class="row">
                     <div class="col-sm-12" >
                        <label class="text-center " style="color:white; font-weight:900;">SCREEN</label>
                     </div>
                  </div>
               </div>
            </div>
            <?php
                for($a=1; $a<=$row_Q1[0]['ROW']; $a++){
                    //row
            ?>
               <div class="row row-eq-height ">
            <?php
               for($b=1; $b<=$row_Q1[0]["COL"]; $b++){
                  //col
            ?>
               <div class="col">
            <?php
               $RowKeyExist = checkIfKeyExist($row_Q2, $a, $b);
                  if($RowKeyExist!== false){
            ?>
                     <div id=<?=$a.",".$b?>>
                        <div class="form-check pl-0">
                           <label class="fas fa-chair SEATIMAGE">
                           <?php
                              if($row_Q2[$RowKeyExist]["TICKETCODE"]=='1'){ //"1" is booked
                                 echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:grey;'";
                              }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]=='2'){ //"2" is bought
                                 echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:red;'";
                              }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]=='0'){ //"0" is temp bought in db and not current user
                                 echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:grey;'";
                              }elseif($row_Q2[$RowKeyExist]["TICKETCODE"]==null){ //"null" is vacant
                                 echo "style='font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:green;'";
                              }
                           ?>
                           </label>
                           <div>
                              <label><?=$row_Q2[$RowKeyExist]["SEATLABEL"];?></label>
                           </div>
                        </div>
                     </div>
                  <?php
                     }else{
                  ?>
                     <div class="d-none">
                        <label class="fas fa-chair SEATIMAGE" style="font-size:25; font-family: Font Awesome\ 5 Free; display: inline-block; content: \f630;  font-weight: 900;  color:purple;"></label>
                        <div>
                           <label>NONE</label>
                        </div>
                     </div>
                  <?php
                     }
                  ?>
                  </div>
               <?php
                  }
               ?>
               </div>
            <?php
               }
            ?>
         </form>
      </div>
   </div>
</div>

Answer 1

Вот рабочий пример того, чего вы хотите достичь.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .my-div {
            width: 300px;
            background-color: red;
            color: white;
            border: 2px solid white;
            display: inline-block;
        }
    </style>
  </head>
  <body>
    <div class="container">
        <div class="row">
            <div class="col-md-12" style="overflow-x: scroll; white-space: nowrap;">
                <div class="my-div">
                    my div   
                </div>
                <div class="my-div">
                    my div
                </div>
                <div class="my-div">
                    my div
                </div>
                <div class="my-div">
                   my div
                </div>
                <div class="my-div">
                    my div
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

Вот скриншот: