Question

我使用引导程序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;
}

Answer 1

我认为这与flex没有任何关系。这是关于定义元素的位置。到目前为止，您仅定义了其最低值/位置。

如果我假设您使用的是Bootstrap的默认网格装订线30px，则只需在左侧和右侧添加15px。

.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>

将项目放在页面底部

1 个答案: