HTML bootstrap 页脚，垂直位置

Question

所以我一直在使用 float:right、margin-left、position relative/absolute 之类的代码来尝试将左侧文本和自定义样式按钮移动到结帐按钮的右侧和顶部，但是无济于事，所以我尝试移动按钮，但它仍然不起作用。所以我希望它不是水平位置，而是垂直方向。像这样的“总硬币=”

/* Checkout Success Modal*/
#checkoutModalBtn{
    background-color: var(--pri-color);
    color: white; 
    font-size: 1.5rem;
    margin: 0 12rem 0 auto;
    padding: 8px 14px;
    margin-top:10rem;
}
#checkoutModalBtn1{
background:white;
    font-size: 1.5rem;
    margin: 0 12rem 0 auto;
    padding: 8px 14px;
    border: none;
    outline: none;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
    pointer-events: none;
    float:right;
}
.coinsTotalRow{
    float:right;
}

 <div class="modal-footer">
                <div class="coinsTotalRow">
                    <p class="checkoutTotal">Total Coins: </p>
                    <p id="checkoutcoinsTotal" onkeypress="return (this.innerText.length <= 10)">

                    <p>
                </div>
                <button type="button" href="#checkoutModal" id="checkoutModalBtn1" data-toggle="modal" class="btn btn-primary"></button>
                <button type="button" href="#checkoutModal" id="checkoutModalBtn" data-toggle="modal" class="btn btn-primary">CHECKOUT</button>
            </div>

                                              "Checkout button"

Answer 1

像这样的东西适合你吗？

https://jsfiddle.net/zcjask9e/

/* Checkout Success Modal*/
#checkoutModalBtn{
    background-color: var(--pri-color);
    color: white; 
    font-size: 1.5rem;
    margin-top: 3rem;
    position: absolute;
}
#checkoutModalBtn1{
background:white;
    font-size: 1.5rem;
    border: none;
    outline: none;
    border-top: 1px solid #111111;
    border-bottom: 1px solid #111111;
    pointer-events: none;
  position: relative;
}
.coinsTotalRow{
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

 <div class="modal-footer">
                <div class="coinsTotalRow">
                    <p class="checkoutTotal">Total Coins: </p>
                    <p id="checkoutcoinsTotal" onkeypress="return (this.innerText.length <= 10)"></p>
                </div>
                
               
                <button type="button" href="#checkoutModal" id="checkoutModalBtn1" data-toggle="modal" class="btn btn-primary"></button> 
                
      
                <button type="button" href="#checkoutModal" id="checkoutModalBtn" data-toggle="modal" class="btn btn-primary">CHECKOUT</button>
            </div>

HTML bootstrap 页脚，垂直位置

HTML bootstrap footer, vertical position

html

css

bootstrap-modal