屏幕底部中心的 Bootstrap 按钮

eiee3dmh 于 2022-12-16 发布在 Bootstrap

关注(0)|答案(1)|浏览(169)

我是新的引导和学习新的东西，我试图把引导按钮的屏幕中心在底部的位置，到目前为止，我的代码是

.bottom-center {
  position: absolute;
  bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class='bottom-center'>
  <button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

twitter-bootstrap

来源：https://stackoverflow.com/questions/66721402/bootstrap-button-bottom-center-of-the-screen

1条答案

按热度按时间

fiei3ece1#

不需要任何附加的CSS来实现这一点。
1.第一件事：使用bootstrap 4而不是3。（bootstrap 3太旧了）
1.将类fixed-bottom添加到按钮容器中，使其位于屏幕底部。
1.将d-flex justify-content-center添加到按钮容器中，使其居中
阅读更多关于flex属性在bootstrap here中

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<p>Just a test of placing the button in center of the screen at bottom position</p>
<div class="fixed-bottom d-flex justify-content-center">
  <button type='button' class='btn btn-primary btn-large btn-start'>Center</button>
</div>

赞(0）回复(0）举报 2022-12-16

我来回答

屏幕底部中心的 Bootstrap 按钮

1条答案

相关问题

热门标签

最新问答