javascript - 垂直对齐表格中具有不同文本大小的按钮(使用 Bootstrap 网格)

标签 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 样式表(由于未知原因从文本中删除了链接)

最佳答案 

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

Apove 这里是所有的 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 - 垂直对齐表格中具有不同文本大小的按钮(使用 Bootstrap 网格)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55845894/

上一篇：html - 使用 VBA 进行网页抓取 - HTMLDocument 对象的早期绑定(bind)与后期绑定(bind)

下一篇：html - "Skip to main content"和免责声明哪个先出现？

相关文章：

javascript - 在 Android 上从 JavaScript 访问 UI

javascript - 在 Angular 中编写可链接函数的正确方法是什么？

html - 减少css中的重复代码

javascript - 将鼠标悬停在无序列表项上会导致其他 div 元素出现不需要的动画

css - 更改为引导下拉菜单透明背景色

JavaScript/JQuery 函数不返回任何内容

c# - Asp.net 下拉列表值在 jquery 对话框中不会更改

javascript - 使用 Javascript 的单数 VS 复数？

javascript - 在jquery中获取文本值？

CSS 定位未按预期显示

©2024 IT工具网  联系我们