Question

在我的html页面中我想在屏幕的左侧保留一个大图像并且右侧列有实际的页面文本，它们垂直滚动，保持左侧图像固定位置但是当显示为小图像时屏幕（smatphones）图片应位于文本的顶部并滚动，因为它将成为文本的一部分。看来我只能得到两个目标中的任何一个，有人可以帮我吗？

我的代码

<div class="row">
  <div class="col-md-8 col-xs-12">
    <img src="somebigpicture.jpg" class="img-responsive" width=100% >
  </div>
  <div class="col-md-4 col-xs-12">
    <div style="height: 100%; overflow-y: scroll; text-align:center">
      page text here......
    </div>
  </div>
</div>

这适用于桌面，但在移动设备上滚动显示在顶部图片后面的文字。如果我离开＆＃34;溢出-y：滚动＆＃34;它适用于移动设备但不适用于台式机。

Answer 1

您可以使用媒体查询，媒体查询仅适用于特定条件，例如特定宽度。

例如，以下 overflow-y 规则不适用于宽于 480px 的屏幕：

@media screen and (max-width: 480px) {
  body {
    overflow-y: scroll;
  }
}

有关媒体查询的详情，请参阅this w3schools page

Answer 2

引导程序grid基于总宽度为12，并且两个xs宽度都使用12，这与如何描述.row中应包含的内容相反：

行是水平的列组，可确保您的列正确排列。



内容应放在列中，只有列可能是行的直接子项。



列类表示您希望在每行可能使用的12列中使用的列数。所以如果你想要三个等宽的列，   你会使用.col-sm-4。

在小屏幕上更改滚动行为

2 个答案: