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

Question

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

  <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. You can see the width values of the screen when you set each bootstrap xs, sm, lg or xlhere.

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

Answer 2

@media 规则

您可以根据多种因素动态更改任何 css 规则，我们想要的是 屏幕尺寸

此规则使用如下

@media screen and (min-width: 480px) {
    --Css rules--
}

常用选择器包括最小宽度、最大宽度、最小高度和最大高度。使用 (min-width: 480px) 只会将规则应用于屏幕尺寸大于 480 像素的屏幕。

如果您想阅读更多内容，here 是一个很好的读物

Answer 3

只需检查 bootstrap，示例：移动和桌面：http://getbootstrap.com/css/#grid-example-mixed

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

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

How to make sidebar form fixed only on large screens

html

css

sidebar

twitter-bootstrap

twitter-bootstrap-3

@media 规则