【发布时间】：2019-06-28 23:24:31
【问题描述】：
如果超过最大宽度，我希望它应该能够滚动。我尝试将宽度设置为 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>
【问题讨论】：
-
将
overfow:auto;添加到你想要添加滚动的div -
@XenioGracias 但是我已经添加了overflow-x:auto;...我还需要添加overflow:auto吗？无论如何它不起作用。仍然是相同的输出。到 18col 时，第 19 列换行
-
@KirpalSingh 请只发布 HTML 和 CSS 代码，以便其他人可以修改它以快速帮助您。
-
@Divanshu 我所有的 html 代码和内联 css。没有外部 css 文件。只有额外的jquery，但与css或html修改无关。
-
@KirpalSingh 您发布的代码已嵌入 PHP。只需通过硬编码 PHP 代码在运行时生成的内容来共享 HTML 和 CSS。社区可以轻松使用 HTML 和 CSS 代码，并且可以快速为您提供帮助。
标签： html css bootstrap-4