Bootstrap 页脚 - 无法使用边距移动按钮

Question

我解决了结账按钮的问题，我无法使用 margin-right 移动它，我被困在这里。它卡在右侧，难以移动。我希望它与硬币总数垂直对齐。

.coinsTotalRow {
  margin-right: 5rem;
}

#checkoutModalBtn {
  background-color: var(--pri-color);
  color: white;
  font-size: 1.5rem;
  position: absolute;
  margin: 8rem 100rem auto auto;
  padding: 1.5rem;
}

#checkoutButtonStyle {
  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;
  padding: 3rem 5.6rem;
  margin-right: 5rem;
}

<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="checkoutButtonStyle" 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>

Answer 1

这里是简化的解决方案。只需使用 align-items: flex-end !important; 和 flex-direction

默认情况下 .modal-footer 在 bootstrap 中启用 display:flex。你只需要 flex-direction: column 和 align-items: flex-end !important；它应该工作得很好。

运行下面的片段。

.coinsTotalRow {
  margin-right: 5rem;
}

#checkoutModalBtn {
  background-color: var(--pri-color);
  color: white;
  font-size: 1.5rem;
  padding: 1.5rem;
}

#checkoutButtonStyle {
  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;
  padding: 3rem 5.6rem;
}

.modal-footer {
  flex-direction: column;
  align-items: flex-end !important;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<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="checkoutButtonStyle" 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>

Bootstrap 页脚 - 无法使用边距移动按钮

Bootstrap Footer - Unable to move button using margins

html

css

bootstrap-modal