Question

假设我有以下代码：

<div class="container">
  <div class="row">
    <div class="col-xs-9">
      1
    </div>
    <div class="col-xs-3">
      2
    </div>
  </div>
  <div class="row">
    <div class="col-xs-9 text-center">
      <button>
        Bottom
      </button>
    </div>
  </div>
</div>

https://jsfiddle.net/x244qg6a/

现在我想将第二行放在页面底部。

如果我只是做以下

.push-to-bottom {
  position: absolute;
  bottom: 5%;
}

<div class="container">
  <div class="row">
    <div class="col-xs-9">
      1
    </div>
    <div class="col-xs-3">
      2
    </div>
  </div>
  <div class="row push-to-bottom">
    <div class="col-xs-9 text-center">
      <button>
        Bottom
      </button>
    </div>
  </div>
</div>

它会忽略text-center类（https://jsfiddle.net/nnkb7e2r/）。

我可以做些什么来实现这种行为？

Answer 1

添加：

width: 100%;

到

.push-to-bottom

Updated jsFiddle

Answer 2

您可以在Flexbox和flex-direction: column的容器元素上使用height: 100vh，这样就可以获得完整的窗口高度。然后，您可以在第二行设置margin-top: auto，这会将该行推到容器的底部。 DEMO

.flex-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.push-to-bottom {
  margin-top: auto;
}

Answer 3

如果您希望.push-to-bottom位于.container的底部，那么您需要将position:relative设置为.container并将其设置为高度，因为通过使用position:absolute，.container的高度仅等于height的{{1}}，在此示例中，我设置了.row的高度是视口高度。

或者您可以简单地保留它（忽略我的CSS中的第一行）并且它将保持相对于文档

并使100vh div使用中心：push-to-bottom

还要确保将left:0;right:0;margin:0 auto和margin-left放在margin-right 0，因为在引导.row.push-to-bottom中有.row和margin-left:-15px; }

还在CSS中进行了一些更改，因此它看起来很漂亮，但你可以忽略它们

让我知道是否有帮助

＆＃13;

margin-right:-15px;

＆＃13;

.container {
  height:100vh;
  position:relative;
  border:2px solid black;
  
}
.push-to-bottom {
  position: absolute;
  bottom: 5%;
  left:0;
  right:0;
  margin:0 auto;

  border:2px solid blue;
   }
.push-to-bottom .col-xs-9 {
  width:100%;
}
.row .col-xs-3 { 
text-align:right
}
.push-to-bottom.row { 
  margin-left:0;
  margin-right:0;
}

＆＃13;

Answer 4

您应该为外部div定义宽度，其位置为绝对位置和容器高度。

return new Promise(function(resolve) {
    resolve(function() {
        console.log('rrrr');
        return $timeout(function(){},100);
    }()); // the extra () will call your anonymous function.
}

如何将元素放在页面底部和div的中心

4 个答案: