html - 如何使侧边栏表单仅在大屏幕上固定

Question

我有以下布局。在移动设备中，布局工作正常，这正是我想要的，我希望内容全屏显示，然后是侧边栏形式。但是在桌面上，我需要边栏表单在滚动时保持固定在视口(viewport)。

  <div class="row">
    <div class="col-lg-10 col-lg-offset-1">
      <h1>Page Heading</h1>
    </div>
    <div class="col-lg-7 col-lg-offset-1">
      <!-- Page content here -->
    </div>
    <div class="col-lg-3">
      <div class="form-holder">
        <!-- form here -->
      </div>
    </div>
  </div>

如何使表单滚动到顶部以及内容仅在桌面上固定在顶部并在较小的屏幕上自由流动。

Answer 1

您可以使用 media query .你可以看到 width设置每个 Bootstrap 时屏幕的值 xs , sm , lg或 xl here .

@media screen and (max-width: 940px){
   .form-holder{
       position: fixed;
   }
}