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。设置每个引导width，xs，sm或lg here时，您可以看到屏幕的xl值。

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

Answer 2

@media Rule

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

此规则使用如下

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

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

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

Answer 3

只需检查引导程序，例如：移动设备和桌面设备：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>

如何使侧边栏形式仅在大屏幕上固定

3 个答案:

@media Rule