Question

我有一些按钮在一行，两个在左边对齐，一个在右边对齐，如下所示：

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;    
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  /* Vertically center the text there */
  line-height: 60px;      
  background-color: #f5f5f5;
}

.fa-arrows-alt {
  color: rgb(231, 81, 37);
  cursor: pointer;
}

<script src="https://use.fontawesome.com/23ac9aaa92.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-md-12">
      A div here
    </div>
    <div class="col-12 col-md-12">
      <button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
      <button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
      <i class="fa fa-arrows-alt fa-2x float-right"></i>
    </div>
  </div>
</div>

<footer class="footer">
  <div class="container">
    <span class="text-muted">Place sticky footer content here.</span>
  </div>
</footer>

我希望按钮强制它们始终位于div的底部，位于页脚之上。我尝试使用bottom：0并定位绝对，固定但我收到了意想不到的结果。欢迎任何建议。

Answer 1

使用bootstrap 4 position-absolute predefined class并添加bottom：0

.position-absolute {
  bottom: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid position-absolute">
  <div class="row">
    <div class="col-12 col-md-12 btn-row">
      <button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
      <button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
      <button type="button" class="btn btn-outline-dark btn-sm float-right">Full Screen</button>
    </div>
  </div>
</div>

Answer 2

要获得贴在屏幕底部的内容，请执行

<footer class="fixed-bottom">

要让左右按钮给每个按钮一个“向左拉”或“向右拉”

Answer 3

使用Bootstrap中内置的flexbox类。你只需要CSS来确保正文是display:flex和全高......

https://www.codeply.com/go/lEaF85K1KU

CSS

body {
   height:100vh;
   display: flex;
   flex-direction: column;
}

.flex-fill {
   flex: 1 1 auto;
}

HTML

<main class="container-fluid d-flex flex-column flex-fill">
    <div class="row flex-column flex-fill">
        <div class="col-12 flex-fill">
            A div here
        </div>
        <div class="col-12">
            <button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
            <button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
            <i class="fa fa-arrows-alt fa-2x float-right"></i>
        </div>
    </div>
</main>
<footer class="container-fluid bg-light py-3">
   Sticky Footer
</footer>

注意： flex-fill实用程序类将included in the next Bootstrap 4.1发布。因此，在该版本发布之后，不需要额外的用于flex-fill的CSS。

Bootstrap 4行左侧和左侧div底部的右对齐按钮

3 个答案: