我希望如果超过最大宽度它应该能够滚动。我尝试将宽度设置为 100% 以及 overflow-x:auto 和 white-space: nowrap，如其他 stackoverflow 帖子中所述，但它不适用于 bootstrap col。我也尝试过使用 flex 和 flex overflow，也尝试过添加 container-fluid 但它仍然有相同的结果，尽管滚动条显示但无法滚动
对于我当前的输出，如果 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>
最佳答案
这是您想要实现的目标的工作示例。
<!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>
截图如下:
关于html - 达到最大宽度时如何使行在 x 轴上滚动(溢出)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54529385/