Bootstrap 5中如何垂直移动注册按钮并保持其可点击性？

算力阿峰

2026-7-25

问题：注册按钮移至“join”文字下方的布局与交互异常问题

我需要将Google、Apple及手机号/邮箱注册按钮放置到“join”文字下方，但尝试多种CSS调整方法后遇到了问题：按钮要么无法移动，要么强制移动后失去可点击功能。

现有代码

CSS代码

.homepage_topRight_Buttons{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.homepage_topRight_Buttons h3{
    margin-left:90%;
    margin-top: -10rem;
}

.homepage_topRight_Buttons button{
    width: 19rem;
    margin-bottom: 1rem;
}

.homepage_topRight_policies {
    width: 20rem;
    margin-left:56%;
    margin-right: 21rem;;
    margin-top: -0.23rem;
    font-size: 0.7rem;
    color: var(--grey-2);
}

.homepage_topRight_policies a {
    color: var(--bomber-primary);
    text-decoration: none;
}

React代码

<div className="row justify-content-center offset-7">  
          <div className="homepage_topRight_Buttons mb-5 col-xl-12 col-l-12 col-md-7 col-sm-9 col-xs-8 d-flex align-items-center ">
            <button className="primary_button">Sign up with Google</button>
            <button className="primary_button">Sign up with Apple</button>
            <button className="secondary_button">
              Sign up with phone or email
            </button> 
            <p className="homepage_topRight_policies">
              By signing up, you agree to the <a href="/">Terms of Service</a> and{""}
              <a href="/">privacy Policy</a>, including{""}
              <a href="/">cookie Use.</a>
            </p>
          </div>
        </div>