Question

我被迫使用Bootstrap 4.1.3，并希望实现一个中间对齐的div，该div占用剩余空间并自动溢出其内容。使页脚和页眉保持固定。像在此示例中使用最新的引导程序（4.3.1）一样： https://jsfiddle.net/x47z1qsv/

现在，引导程序4.1.3中的示例完全相同，但我无法弄清楚原因：https://jsfiddle.net/69g0yhj8/

<div class="container-fluid d-flex h-100 flex-column">
    <div class="row flex-shrink-0">
        <div class="col-12">
            <h5>Header</h5>
        </div>
    </div>
    <div class="row bg-primary flex-fill d-flex overflow-auto">

        <div class="col-12">
           Start<br/>
           Line of text<br/>
           Line of text<br/>
           Line of text<br/>
           Line of text<br/>
           Line of text<br/>             
           Line of text<br/>
           End<br/>           
        </div>
    </div>
    <div class="row flex-shrink-0">
        <div class="col-12">
            <h5>Footer</h5>
        </div>
    </div>
</div>

Answer 1

overflow-auto类在引导程序4.1.3中不存在

如果要使用它，请在自定义CSS中添加它

.overflow-auto {
    overflow: auto!important;
}

查看更新后的fiddle

html,
body {
  height: 100%;
}

.overflow-auto {
  overflow: auto!important;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container-fluid d-flex h-100 flex-column">
  <div class="row flex-shrink-0">
    <div class="col-12">
      <h5>Header</h5>
    </div>
  </div>
  <div class="row bg-primary flex-fill d-flex overflow-auto">

    <div class="col-12">
      Start<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/>      Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/>      Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> Line of text<br/> End
      <br/>
    </div>
  </div>
  <div class="row flex-shrink-0">
    <div class="col-12">
      <h5>Footer</h5>
    </div>
  </div>
</div>

使居中的自动溢出div占用引导程序4.1.3中的剩余空间

1 个答案: