html - 制作一个可水平滚动的 Bootstrap 行

Question

我正在尝试在 boostrap 中制作一个滚动行。该行封装了 5 个或更多列，每个列都属于“col-sm-3”类。现在我不希望额外的列折叠到下一行，而是它们应该保持隐藏状态直到滚动。 有人可以帮助实现这一目标吗？这是代码，请看simi

<!-- listings -->
<div class="col-sm-10">

  <div class="row" style="overflow-x:visible; overflow-y:hidden; display:inline-block;">
    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>

    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>

    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>

    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>

    <div class="col-sm-3">
      <div class="affiliate-frame text-center" id="product1">
        <a href="#">
          <img alt="" class="square-frame" src="images/product1-market.jpg">
        </a>

        <div class="padd-top-10 font-size-14">Casual T Shirt Black</div>

        <div class="padd-top-10 "><a href="#" class="lnk-affiliates"> AED 225 </a>
        </div>
        <div class="padd-top-10 ">
          <a href="#" class="lnk-affiliates"> <strong> Dubai, UAE </strong>
          </a>
        </div>
      </div>
      <!-- affiliate frame -->
    </div>
  </div>

</div>
<!-- listings -->

Answer 1

需要在容器上使用 white-space:nowrap 并且在每列上使用 float:none;display:inline-block

https://jsfiddle.net/g8138wjo/2/