html - Bootstrap 中的响应式可滚动框架

Question

我有一个当前响应式的文本正文。

<div class = "col-sm-6 col-xs-6>
  <div class = "well">
    <p> A lot of text... </p>
  </div>
</div>

我希望文本可以滚动(在井内)，但我希望井的最大高度可以根据屏幕尺寸进行更改。

以下内容使井可滚动，但我不确定如何拥有自定义高度...一个用于 sm，一个用于 xs。

.scroll_for_sm {
  height: 500px !important;
  overflow: scroll;
}


.scroll_for_xs {
  height: 250px !important;
  overflow: scroll;
}

Answer 1

如果您希望井的高度根据屏幕尺寸(或高度)做出响应，只需为您的 body 指定一个高度，然后在您的 css 中添加:

html, body {
    height:100%;
    min-height: 100% !important;
}

然后，为了更好，添加这个 css:

.well{
    height:100%;
}

(百分比可以更改为像素、em、% 等，并根据您的需要相应地赋值)