Bootstrap - 列溢出（滚动）答案

【问题标题】：Bootstrap - row overflow with columns (scroll)Bootstrap - 列溢出（滚动）
【发布时间】：2020-09-05 09:10:18
【问题描述】：

有没有可能做出类似的东西：

<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>

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

感谢您的帮助！

【问题讨论】：

你是说水平滚动？
是的，确切地说，它适用于文本等...但不适用于列..，每当我添加更多列然后大小为 12 ..它创建一个新行或让我们调用它线..

标签： html css reactjs bootstrap-4 react-bootstrap

【解决方案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>

Codepen Version

【讨论】：

【解决方案2】：

使用flex-wrap: nowrap 到row 和bootstrap class flex-nowrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>


<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>

【讨论】：

告诉我更多帮助