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

时间：2019-04-25 09:22:02

标签： javascript html css twitter-bootstrap layout

尽管这个问题似乎是一个普遍的问题，但我找不到关于SO的类似问题的讨论。我正在尝试在定价表中垂直对齐按钮。问题在于，当使浏览器变窄时，会在上方更改文本大小，这会导致按钮按下不均。

此网站（https://joinhomebase.com/homebase-pricing/）上显示的4个按钮会在您缩小浏览器范围时立即向下移动，并且始终保持垂直对齐。同时，上面的文本换行为3或4行。那正是我想要实现的目标，但是通过分析开发人员工具信息，我找不到哪个CSS参数是相关的。

我正在使用只有1行的Bootstrap Grid，以便在屏幕非常狭窄时，各列彼此堆叠。我也使用ReactJS，但这与IMO无关。 This image shows that in the middle column the button is pushed down. 

#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样式表（出于未知原因从此文本中删除了链接）

1 个答案:

答案 0 :(得分：0)

.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>

这里的意思是所有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

相关问题
最新问题