制作一个可水平滚动的bootsrap行

Question

我正在尝试在boostrap中创建一个滚动行。该行封装了5个或更多列，每个列为＃34; col-sm-3＆＃34;。现在我不希望额外的列折叠到下一行，而是应该保持隐藏直到滚动。 有人可以请帮忙解决这个问题吗？这是代码，请参阅simi

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

在容器上需要white-space:nowrap，在每列上需要float:none;display:inline-block

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