Question

在我目前使用bootstrap的网站上，我有一套＆＃39; wells＆＃39;在container-fluid内。我试图实现的效果是让每个井并排排成一排。对于几口井来说这很好。但是，现在我增加了更多的井，我开始测试较小的分辨率。

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

以下是一段简短的代码，让您了解我的结构：

＆＃13;

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

＆＃13;

我使用的是正确的容器吗？我怎样才能做到这一点＆＃39;没有包装＆＃39;行结果？

谢谢！

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

Bootstrap：防止井＆＃39;从包装

1 个答案: