时间戳

首页 > 解决方案 > Bootstrap 4：修复容器底部的内容

html - Bootstrap 4：修复容器底部的内容

问题描述

我有一个围绕 a 的应用程序<div class="container">，其中有一个编辑器和一些按钮，我总是希望在底部显示它们，如下所示：

<div class="container>
  // some content....


  // this should be shown always at the bottom!
  <div id="bottom" class="submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>

我尝试将 html、body 和 container 的 min-height 和 height 属性更改为 100%，并在此规则中添加了重要内容，但这不会使我的 div 容器向下拉伸。当我使用“fixed-bottom”引导类时，#bottom div 在容器边界上水平延伸，这使得布局非常难看。

有什么建议么？:)

标签： htmlcssbootstrap-4

解决方案

用另一个容器包装您的“提交表单”或col-*用于定位。

例如：

<div class="container">
  <!-- some content.... -->


  <!-- this should be shown always at the bottom! -->
  <div id="bottom" class="container fixed-bottom submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>
</div>

按类操作您的 div 大小col-*（引导网格包含 12 列，因此下面的 div 将覆盖 4 列屏幕大小）：

<div class="container">
  <!-- some content.... -->


  <!-- this should be shown always at the bottom! -->
  <div id="bottom" class="col-4 fixed-bottom submit-form">
    <div id="editor"></div>
    <div class="btn btn-grp" ></div>
  </div>
</div>

之后，此表单将与屏幕左侧对齐。

使用 d-flex 定位引导列：

  <div class="container">
      <!-- some content.... -->
    
    
      <!-- this should be shown always at the bottom! -->
     <div class="d-flex justify-content-center fixed-bottom">
        <div id="bottom" class="col-4 submit-form">
         <div id="editor"></div>
        <div class="btn btn-grp" ></div>
  </div>
     </div>
   </div>

如果您想创建响应式网站，您应该阅读有关引导网格系统和使用等的内容col-md-*，col-sm-*而不是col-*：

https://getbootstrap.com/docs/4.0/layout/grid/

推荐阅读