如何在自举程序中将按钮与行/列的底部对齐? [英] How do I align the button to the bottom of the row/column in bootstrap?

问题描述

我有4列的行，每列有一个标题和一些文本.大多数列具有相似的文本量，然后向下按其列中的按钮以匹配其余列.但是，一列文字较少，并且无法将按钮按下得足够远.

I have row with 4 columns each with a heading and some text. Most of the columns have a similar amount of text and push the button in their column down to match the rest of the columns. However one column has less text and doesn't push the button down far enough.

是否可以将按钮与行的底部对齐?我想实现这一目标，并同时保持响应速度，以便在屏幕较小时看起来像这样:

Is there a way to align the button to the bottom of the row? I would like to achieve this and keep it responsive at the same time so it looks like this when the screen is smaller:

这是我刚才在页面上的标记:

This is my markup of the page just now:

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>less text here</p>
      <p><a class="btn btn-default more" href="#" role="button">View details >></a></p>
    </div>
    <div class="col-md-3">
      <h2>Heading</h2>
      <p>text here</p>
      <p><a class="btn btn-default" href="#" role="button">View details >></a></p>
    </div>
  </div>
</div>

推荐答案

有几种方法可以完成:

• 给容器一个固定的高度.这不是理想的，因为要使其看起来不错，您将必须为每个断点设置不同的高度.
  您还需要将按钮设置为 position:absolute ， bottom:0 并添加一些底部填充/边距.

• Give the containers a fixed height. This is not ideal as in order for it to look nice you will have to set different heights for each of the breakpoints.
  You will also need to set the button to position: absolute, bottom: 0 and add some bottom padding/margin.

使用一些JavaScript来匹配高度，例如匹配高度.您还需要将位置设置为上一点.

Use some javascript to match the heights using something like match height. You will also need to set the positions as in the previous point.

添加另外一行，并在4个新列中重复您的按钮.然后使用引导响应类，显示或隐藏原始按钮和新按钮.

Add an additional row and repeat your buttons within 4 new cols. Then show or hide your original buttons and the new ones using bootstraps responsive classes.

这篇关于如何在自举程序中将按钮与行/列的底部对齐?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！