html - Bootstrap - 列溢出（滚动）

Question

有没有可能做类似的事情：

<div className="row">
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
 <div className="col-sm-4">1</div>
</div>

但我想要一个溢出，而不是一个新行

感谢帮助！

标签： htmlcssreactjsbootstrap-4react-bootstrap

Answer 1

Bootstrap 具有flex-nowrap可用于此目的的类。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="row flex-nowrap">
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
 <div class="col-sm-4">1</div>
</div>

代码笔版本