相关疑难解决方法(0)

使用Twitter的Bootstrap添加垂直空白的最佳方法是什么？

例如,假设我正在创建一个登录页面,并希望在某个按钮的上方和下方有一点(100px)的空白空白.显然,我可以为该特定按钮创建一个特定的类.但是,我认为Bootstrap应该有一种干燥的方式来添加垂直空格.

I added d-flex and flex-column classes to a Bootstrap card-body class in order to align a contained button to the bottom of the card, as suggested in this question's top answer. My problem is that doing so caused the button to widen to fill the card. How can I get the button to return to shrinking to fit the button's text, as it did before I added the flex classes?

...
<div class="row pt-4" id="cards">
  <div class="card-deck">

    // THIS IS …

我使用的是Bootstrap 4.0.0版本

这是一个例子:: https://getbootstrap.com/docs/4.0/examples/pricing/

如何使按钮始终与底部对齐？

这是jsfiddle:https://jsfiddle.net/34shLh1m/

代码html:

<div class="card-deck mb-3 text-center">
  <div class="card mb-4 box-shadow">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">Free</h4>
    </div>
    <div class="card-body">
      <h1 class="card-title pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
      <ul class="list-unstyled mt-3 mb-4">
        <li>10 users included</li>
        <li>2 GB of storage</li>
        <li>Email support</li>
        <li>Help center access</li>
        <li>Help center access</li>
      </ul>
      <button type="button" class="btn btn-lg btn-block btn-outline-primary">Sign up for free</button>
    </div>
  </div>
  <div class="card mb-4 box-shadow">
    <div class="card-header">
      <h4 class="my-0 font-weight-normal">Pro</h4>
    </div>
    <div class="card-body">
      <h1 …

我将一组自举程序卡放在一个卡组中，这意味着它们的宽度和高度都相同。每张卡的内容高度不同，我需要在每张卡的底部对齐一个按钮（不是卡的页脚，我在那里还有其他内容）。我尝试在每张卡中添加“人造”空白，以便它们都匹配，但是在调整窗口大小时会中断。有任何想法吗？这是相关的代码。

<div class="card-group">
    <div class="card">
        <div class="card-header">
            Header
        </div>
        <div class="card-body">
            <div>
                Line 1
            </div>
            <div>
                Line 2
            </div>
            <div>
                Line 3
            </div>
            <div>
                <input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
            </div>
        </div>
        <div class="card-footer">
            Footer
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            Header
        </div>
        <div class="card-body">
            <div>
                Line 1
            </div>
            <div>
                Line 2
            </div>
            <div>
                <input type="button" class="btn btn-primary" value="Need this button aligned at bottom of card" />
            </div>
        </div>
        <div class="card-footer">
            Footer
        </div> …