html - Bootstrap : Prevent 'wells' from wrapping

Question

在我当前使用 bootstrap 的网站上，我有一组 ' wells ' 在 container-fluid 内。我想要达到的效果是让每口井并排成一排。这对于几口井来说已经很好了。然而，现在我添加了更多的孔，并开始在更小的分辨率上进行测试。

现在，当孔到达浏览器窗口的边缘时，它们会环绕。这不是我想要的行为。相反，我希望出现一个水平条，并允许用户侧向滚动以查看其余的孔。所有孔都应位于同一行，无论屏幕分辨率、孔数量以及孔内容物的宽度如何。

这是一段简短的代码，可让您了解我的结构:

<div class="container-fluid">
  <div class="row">
    <div class="span">
      <div id="pipelinesPackagesViewPane" class="well well-sm">
        <h2> Well 1 </h2>
        <p> Long line of texxxtttttttttttttt </p>
      </div>
    </div>
    <div class="span">
      <div id="pipelinesPackagesViewPane" class="well well-sm">
        <h2> Well 2 </h2>
        <p> Long line of texxxtttttttttttttt </p>
      </div>
    </div>
    <div class="span">
      <div id="pipelinesPackagesViewPane" class="well well-sm">
        <h2> Well 3 </h2>
        <p> Long line of texxxtttttttttttttt </p>
      </div>
    </div>
    <!-- MORE WELLS HERE -->
  </div>
</div>

我使用的容器正确吗？如何才能实现“不换行”行结果？

谢谢!

Answer 1

您可能需要一些自定义 CSS 才能使用以下命令获得结果:

<div class="container-fluid">
  <div class="row wells"> // ADD Class "wells"
    <div class="span">

然后在CSS上

.row.wells {
  white-space:nowrap;
  overflow:auto;
    }
.span {
  display:inline-block;
 }

检查这个Demo