带有表单 POST 按钮的 Bootstrap 4 卡片 - 无法与卡片底部对齐

Posted 2023-03-05

【中文标题】带有表单 POST 按钮的 Bootstrap 4 卡片 - 无法与卡片底部对齐

【英文标题】：Bootstrap 4 Card with Form POST Button - Can't align to bottom of card

【发布时间】：2020-08-22 19:09:20

【问题描述】：

我有一个 bootstrap 4 卡，最后有一个按钮，它是一个带有 POST 方法和附加 URL 的表单按钮。如何将此按钮与卡片底部对齐？这是我当前的代码，如果与非表单按钮一起使用，则可以正常工作。您可以看到我在卡片主体中有 d-flex 和 flex-column 以及按钮上的 mt-auto，如 Bootstrap - align button to the bottom of card 所建议的那样

div class="container">
  <div class="card-deck mb-3 mt-4 text-center">

    % for object in object_list %

    <div class="card mb-4 box-shadow">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Stuff</h4>
      </div>
      <div class="card-body d-flex flex-column">
        % if Stuff == 'Stuff' %
        <h3 class="card-title pricing-card-title">Stuff</h3>
        % else %
        <h3 class="card-title pricing-card-title">Stuff</h3>
        % endif %
        % if Stuff != 'Stuff' %
        <small>Stuff</small>
        <small> Stuff  Stuff</small>
        % endif %
        % if Stuff != 'Stuff' %
        <ul class="list-unstyled mt-3 mb-4">
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li><strong>Stuff</strong></li>
          <li>Stuff</li>
          % if Stuff == 'Stuff' %
          <li>Stuff</li>
          % endif %
        </ul>
        % else %
        <ul class="list-unstyled mt-3 mb-4">
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
          <li>Stuff</li>
        </ul>
        % endif %
        <form method="POST" action="% url 'Stuff' %">
          % csrf_token %
          <div class="form-group">
            <div class="row d-flex justify-content-center">
              <div class="col-5">
                <button type="submit" class="btn btn-info btn-md btn-block login-button mt-auto">Stuff</button>
              </div>
            </div>
          </div>
          <!-- <button class="btn btn-warning">Stuff</button> -->
          <input type="hidden" name="Stuff" value=" Stuff ">
        </form>


      </div>

    </div>
    % endfor %
  </div>


</div>

【参考方案1】：

我希望我以正确的方式理解您，但是如果您将其添加到 CSS 中会怎样：

.card-body
padding-bottom:  0px;

按钮将更靠近卡片底部。

【讨论】：

老实说，这与按钮与底部的距离无关。相反，它们都在问题底部的同一点对齐：***.com/questions/48406628/…

【参考方案2】：

通过在表单部分使用 class="mt-auto" 解决了这个问题。这个问题：bootstrap card buttons and input text aligned bottom 表示 mt-auto 下的任何内容都底部对齐。