Question

我有一个使用Bootstrap构建的iPhone应用程序。其中一个页面是静态文本html页面，底部带有一个按钮。

当静态文本对于屏幕而言太长，并且用户向上滚动页面以查看其余文本时，该按钮将与文本一起向上滚动，而不会固定在屏幕底部。

这是页面末尾的html代码

<div class="col-xs-12 col-sm-12 no-padding">        
    <button class="btn btn-block no-padding" 
        type="submit" ng-click="accept()" id="login-btn"> 
         {{"button.accept"}}
    </button>
</div>

即使向上滚动页面，如何使按钮仍停留在底部。

Answer 1

您可以为按钮建立一个新类，并为其赋予绝对位置，如：

.my-fixed-button {
  position: absolute;
  right: 15px;
  bottom: 15px;
}

…未经测试，应该可以工作;）

Answer 2

我认为您也希望按钮居中。如果绝对要放置按钮，则也不必在div内放置按钮。另外，由于position: absolute，我将使用下面设置的left和transform属性以使其居中：

.button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

如果出于任何原因需要该div，则将上述CSS应用于div，并不按钮。

页面底部的引导按钮

2 个答案: