Question

我知道您可以使用以下css代码将元素固定在底部：

position: fixed;
bottom: 0;
left: 0;

问题是小型设备上的底层内容会覆盖其上方的内容。有人知道bootstrap是否为这个问题提供了响应式解决方案吗？

Answer 1

你总是可以使用！important。但是你可能应该使用粘性页脚。您需要将填充物放在身体上的页脚高度上> 。容器。见http://getbootstrap.com/examples/sticky-footer-navbar/。

Answer 2

.force-to-bottom {
    position:absolute;
    bottom: 5%;
    width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootswatch/latest/journal/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row force-to-bottom text-center">
        <div class="col-xs-12">
            	<h1>
				       <button class="btn btn-primary" type="button">Save</button>
			       </h1>

        </div>
    </div>
</div>

致谢：https://stackoverflow.com/a/19072741/5192105

Answer 3

如果我正确理解了问题，您可以通过body margin-bottom解决此问题来解决问题。假设您有div height 200px的固定body { margin-bottom: 200px; }。

使用：

for (var i = 1; i < points.length; i++) {
      paintBoard.ctx.beginPath();

      paintBoard.ctx.moveTo(points[i - 1].x, points[i - 1].y);

      paintBoard.ctx.lineTo(points[i].x, points[i].y);
      paintBoard.ctx.closePath();
      paintBoard.ctx.stroke();
}

使用bootstrap将元素定位到底部

3 个答案: