javascript - 将表格中的按钮垂直对齐，上方的文字大小会有所不同(使用引导网格)

虽然这个问题似乎是一个常见的问题，但我找不到有类似问题的讨论。我试图在定价表中垂直对齐按钮。问题是在缩小浏览器范围时更改上面的文本大小，这会导致不平等地向下按按钮。
这个网站（https://joinhomebase.com/homebase-pricing/）显示了4个向下移动的按钮，只要你缩小浏览器的范围，它们就会保持垂直对齐。同时，上面的文本换行为3或4行。这正是我想要实现的，但是通过分析开发人员工具信息，我无法找出哪个CSS参数是相关的。
我使用的是只有一行的引导网格，这样当屏幕非常窄时，列就会堆叠在一起。我也在使用ReactJS，但这与这个问题无关。

#pricing-table {
  margin: 0 0 2em 0;
}

#pricing-header {
  text-align: center;
  margin: 20px 0 40px;
  background-color: #64B1BC;
  padding: 0.5em 0 0.5em;
  color: white;
  font-size: 35pt;
  font-weight: normal;
  font-family: Raleway, Arial, sans-serif;
}

.pricing-col-title {
  color: black;
  font-size: 18pt;
  font-weight: 400;
  padding: 0.5em 0 0.5em 0;
  margin: 0;
  border-bottom: 1px solid #021a40;
}

.pricing-col {
  margin: 0;
  padding: 0 0 1em;
  border-left: 1px solid #021a40;
  border-top: 1px solid #021a40;
  border-bottom: 1px solid #021a40;
  text-align: center;
}

.pricing-row {
  margin: 0;
  padding: 0;
  border-right: 1px solid #021a40;
}

.pricing-col-adtext-container {
  min-height: 90px; //does not work when making browser narrower
  //height: 90px;     //creates overlapping text
}

.pricing-col-adtext {
  color: black;
  font-size: 14pt;
  padding: 0.5em;
  font-weight: normal;
  font-family: Raleway, Arial, sans-serif;
  text-align: center;
}

.pricing-col-price {
  color: black;
  font-size: 18pt;
  padding: 0;
  font-weight: bold;
  font-family: Raleway, Arial, sans-serif;
  text-align: center;
}

.pricing-btn-signup-container {
  border-bottom: 1px solid black;
}

.pricing-btn-signup {
  display: block;
  margin: 0 auto 0.5em;
  width: 200px;
  height: auto;
  text-align: center;
  background-color: #f9b200;
  border-radius: 0;
  border: 0;
  color: #000000;
  font-size: 18px;
  font-family: Raleway, Arial, sans-serif;
  font-weight: 500;
}

.pricing-col-feature {
  color: black;
  font-size: 14pt;
  padding: 1em 1em 0;
  font-weight: normal;
  font-family: Raleway, Arial, sans-serif;
  text-align: left;
  margin-left: 1em;
}

<div id="pricing-table" className="container">
  <div>
    <h1 id="pricing-header">Pick the plan that's best for you. </h1>
  </div>


  <div className="row pricing-row">

    <div className="col-md-4 pricing-col">
      <h3 className="pricing-col-title">Free</h3>
      <div className="pricing-col-adtext-container">
        <h4 className="pricing-col-adtext">Lorem ipsum dolor sit amet</h4>
      </div>
      <h2 className="pricing-col-price">Free</h2>
      <div className="pricing-btn-signup-container">
        <a role="button" className="btn btn-primary btn-lg pricing-btn-signup" href="">Sign up</a>
      </div>
      <ul className="pricing-col-feature">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>

    </div>


    <div className="col-md-4 pricing-col">
      <h3 className="pricing-col-title">Standard</h3>
      <div className="pricing-col-adtext-container">
        <h4 className="pricing-col-adtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h4>
      </div>
      <h2 className="pricing-col-price">Free</h2>
      <div className="pricing-btn-signup-container">
        <a role="button" className="btn btn-primary btn-lg pricing-btn-signup" href="">Sign up</a>
      </div>

      <ul className="pricing-col-feature">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>

    </div>

    <div className="col-md-4 pricing-col">
      <h3 className="pricing-col-title">Premium</h3>
      <div className="pricing-col-adtext-container">
        <h4 className="pricing-col-adtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</h4>
      </div>
      <h2 className="pricing-col-price">Free</h2>
      <div className="pricing-btn-signup-container">
        <a role="button" className="btn btn-primary btn-lg pricing-btn-signup" href="">Sign up</a>
      </div>

      <ul className="pricing-col-feature">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>

  </div>


  <div className="container-fluid footer">
    <Footer/>
  </div>

</div>

除了所描述的问题之外，我的代码可能还有一些小问题-欢迎任何提示，我是一个前端初学者。
编辑：我正在构建bootswatch的样式表（由于未知原因从本文中删除了链接）

最佳答案

.row.is-flex{
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand.
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

<div class="container">
  <div class="row is-flex">
    <div class="col-md-4">
      <div class="col-12" style="background: red;">
        <h1>test1</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ut quae, blanditiis aut sapiente cum recusandae, quasi consequatur quia sint ab debitis similique, nisi temporibus minus maxime distinctio error iure.
      </div>
    </div>
    <div class="col-md-4">
    <div class="col-12" style="background: orange;">
        <h1>test2</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ut quae, blanditiis aut sapiente cum recusandae, quasi consequatur quia sint ab debitis similique, nisi temporibus minus maxime distinctio error iure.
      recusandae, quasi consequatur quia sint ab debitis similique, nisi temporibus minus maxime distinctio error iure.
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-12" style="background: blue;">
        <h1>test3</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ut quae, blanditiis aut sapiente cum recusandae, quasi consequatur quia sint ab debitis similique, nisi temporibus minus maxime distinctio error iure.
      </div>
    </div>
  </div>
</div>

所有的沙发都是一样高的
codepen
下面我为你写了一个新的代码-按钮将始终保持在底部。

.outer .inner {
  display: flex;
  flex-direction: column;            /*  stack items vertically  */
}
.outer .inner .button {
  margin-top: auto;                  /*  push button to bottom  */
}


/* styling for this demo only  */
.outer {
  display: flex;
}
.outer .inner {
  width: 33.333%;
  padding: 5px;
  border: 1px dotted red;
}
.outer .inner .header,
.outer .inner .text {
  padding: 10px;
}
.outer .inner .button {
  border: 1px solid gray;
  text-align: center;
}

<div class="outer">
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Some text</div>
    <div class="button">Button</div>
  </div>
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, nobis consequatur illum rem dicta laborum aliquam enim mollitia minima cum accusantium porro provident, nam recusandae tempore in? Dolore, fugit nemo.</div>
    <div class="button">Button</div>
  </div>
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Some text that is middle middle middle middle long</div>
    <div class="button">Button</div>
  </div>
</div>

here the new codepen (button always on bottom

关于javascript - 将表格中的按钮垂直对齐，上方的文字大小会有所不同(使用引导网格)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/55845894/