Question

我正在使用bootstrap与bootstrap-horizon结合使用以进行图像的水平显示。理想情况下，我希望图像在桌面和平板电脑上保持水平滚动，然后在移动设备上更改为垂直堆叠的奇异图像。但是，图像开始堆叠比我想要的中间屏幕宽度更快。

<div class="DocumentList">
<div class="row">
  <div class="col-sm-1 DocumentItem">
    <br>
    <img src="http://placehold.it/400x600?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    <br><br>
  </div>
  <div class="col-sm-1 DocumentItem">
    <br>
    <img src="http://placehold.it/400x600?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    <br><br>
  </div>
  <div class="col-sm-1 DocumentItem">
    <br>
    <img src="http://placehold.it/400x600?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    <br><br>
</div>
  <div class="col-sm-1 DocumentItem">
    <br>
    <img src="http://placehold.it/400x600?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    <br><br>
</div>
  <div class="col-sm-1 DocumentItem">
    <br>
    <img src="http://placehold.it/400x600?text=IMAGE" class="img-responsive" style="width:100%" alt="Image">
    <br><br>
</div>

....这些只是作为填充物重复。

地平线的.css是：

.DocumentList{
overflow-x:scroll;;
overflow-y:hidden;
padding: 20px;
height: auto;
white-space:nowrap;
position:relative;
display:inline-block;
}

.row {
width: 400%;
}

.rowsmall {
width:50%;
}

.DocumentItem{
border:1px solid black;
padding:50px;
height:auto;
width: 400px;
}

输出如下： 1 2 3 4 5 6 7 8 9 ....（在桌面上 - 确定）

1 2 3
4 5 6
7 8 9
（中等大小 - 这就是我想要改变的......我希望这能继续水平滚动）

1
2
3
4
......（在手机上 - 好的）

使用水平滚动覆盖引导程序中的堆叠

0 个答案: