时间戳

首页 > 解决方案 > 将项目保留在页面底部

css - 将项目保留在页面底部

问题描述

使用引导程序 4，我试图在页面底部保留一行，其中包含一些列。添加位置固定和底部时，它会脱离放置而不是保持居中。我认为这与flex有关吗？

JSFiddle：http: //jsfiddle.net/1dLrfsbh/1/

<div class="container-fluid">
    <div class="mt-3 text-center justify-content-center">
    <img src="https://via.placeholder.com/800x200" class="img-fluid logo" />

    <div class="chk-actions">
       <div class="row">
           <div class="col-lg-6">
              <a href="#">
                <img class="img-fluid" src="https://via.placeholder.com/800x200" />
              </a>
           </div>

           <div class="col-lg-6">
               <a href="#">
                  <img class="img-fluid" src="https://via.placeholder.com/800x200" />
               </a>
         </div>
      </div>
</div>


.chk-actions {
  position: fixed;
  bottom: 20px;
}

.chk-actions a {
  margin-bottom: 10px;
}

标签： csstwitter-bootstrapbootstrap-4

解决方案

我认为这与 flex 无关。这是关于定义元素的位置。到目前为止，您只定义了它的底部值/位置。

如果我假设您使用的是 Bootstrap 的默认网格间距 30 像素，我只需为左右添加 15 像素。

.chk-actions {
  position: fixed;
  bottom: 20px;
  left: 15px;
  right: 15px;
}

.chk-actions a {
  margin-bottom: 10px;
}
<div class="container-fluid">
    <div class="mt-3 text-center justify-content-center">
    <img src="https://via.placeholder.com/800x200" class="img-fluid logo" />

    <div class="chk-actions">
       <div class="row">
           <div class="col-lg-6">
              <a href="#">
                <img class="img-fluid" src="https://via.placeholder.com/800x200" />
              </a>
           </div>

           <div class="col-lg-6">
               <a href="#">
                  <img class="img-fluid" src="https://via.placeholder.com/800x200" />
               </a>
         </div>
      </div>
</div>

推荐阅读