如何在移动设备上将现有按钮固定到底部? (引导)

Posted

技术标签:

【中文标题】如何在移动设备上将现有按钮固定到底部? (引导)【英文标题】:How to fix an existing button to the bottom on mobile? (bootstrap) 【发布时间】:2022-01-20 20:38:55 【问题描述】:

我在列的容器中有一个现有按钮。我需要将其从桌面上的正常位置更改为固定到移动设备上的屏幕底部。

这是一个例子

#free-offer-button 
  background-color: #d97b6c;
  border-color: #d97b6c;
  border-radius: 0px;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  padding: 9px 23px;
<Col xs= span: 12, order: 2  md= span: 6, order: 1 >
<h3 id='first-container-header'>Treat your pet (and you).</h3>
<h3>It's on us!</h3>
<br></br>

<p>Treat your pet to a healthy treat for <strong>free</strong> to kick off your Public Goods trial membership.</p>
<p><strong>See what it's like to be a Public Goods member.</strong></p>
<ul>
  <li>Included in your bundle is free 2-week membership that gives you unlimited access to our entire collection of sustainable essentials.</li>
  <li>Take a load off. We make it easy for your to make better choices. Always included: eco-friendly products you can trust.</li>
</ul>

<div className='d-grid mt-5'>
  <Button variant="btn-block" id='free-offer-button'> Claim your free offer</Button>
</div>

</Col>

【问题讨论】:

你试过 position absolute 和 bottom: 0 吗? 这能回答你的问题吗? Place button on bottom of div or screen 或者这个***.com/questions/32270496/… 【参考方案1】:

使用媒体查询@media希望您的问题会得到解决。

并且还使用引导类名称class="position-fixed bottom-0"

#free-offer-button
background-color:#d97b6c;
border-color: #d97b6c;
border-radius:0px;
color:#ffffff;
font-size:18px;
font-weight:bold;
padding:9px 23px;

@media only screen and (max-width: 575px) 
  #free-offer-button 
    position:fixed;
    bottom:0;
    font-size:14px;
    width:100%;
    font-weight:normal;
    border:1px solid #d97b6c;
  
<Col xs= span: 12, order: 2  md= span: 6, order: 1 >
                        <h3 id='first-container-header'>Treat your pet (and you).</h3>
                        <h3>It's on us!</h3>
                        <br></br>

                        <p>Treat your pet to a healthy treat  for <strong>free</strong> to kick off your Public Goods trial membership.</p>
                        <p><strong>See what it's like to be a Public Goods member.</strong></p>
                        <ul>
                            <li>Included in your bundle is free 2-week membership that gives you unlimited access to our entire collection of sustainable essentials.</li>
                            <li>Take a load off. We make it easy for your to make better choices. Always included: eco-friendly products you can trust.</li>
                        </ul>

                    <div className='d-grid mt-5'>
                        <Button variant="btn-block" id='free-offer-button'> Claim your free offer</Button>
                    </div>

                </Col>

【讨论】:

谢谢,就是这样,但按钮左侧还有一点空间?由于某种原因,它不是屏幕边缘的全宽【参考方案2】:

使用位置:

<div className='d-grid mt-5 col-12' style="position:'relative'">
<Button variant="btn-block" id='free-offer-button' style="position:'fixed';bottom:0;"> Claim your free offer</Button>
</div>

【讨论】:

固定定位元素总是相对于文档,而不是任何特定的父元素。不需要父级的position: relative

以上是关于如何在移动设备上将现有按钮固定到底部? (引导)的主要内容,如果未能解决你的问题,请参考以下文章

拖动到弹出视图控制器会导致固定到底部的按钮跳转(使用标签栏)

将Google地图徽标移到底部的自定义界面上方。 JavaScript的

iOS 布局约束:当内容到达底部时固定到底部或随内容流动

使用 PlatformConfiguration (Xamarin.Forms 2.3.3) 在 UWP 中将工具栏移动到底部

Android:将按钮文本移动到底部

js监听页面的scroll事件,当移到底部时触发事件