Bootstrap CSS按钮在文本后固定位置

Question

我正在尝试在列中设置带有信息的卡片。由于显示的文本有不同的长度，我想修复与卡片末尾相关的 Learn More 按钮的位置，因此无论之前发生什么，按钮始终对齐。

此外，我想在行之间分隔卡片，但我还没有找到解决方案，因为如果我更改边距，它只会应用于最后一行。

这是我的代码：

<div class="row my-flex-card">
    <div class= "col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
        <!--Card-->
          <div class="card">
              <!--Card image-->
              <img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
              <!--Card content-->
              <div class="card-body inline-block">
                  <!--Title-->
                  <h4 class="card-title">{{woman.name}}</h4>
                  <!--Text-->
                  <p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
                  <a class="btn btn-success" href="#!/women/details/{{woman._id}}">Learn more</a>
              </div>

          </div>

          <!--/.Card-->
    </div>
  </div>

我的 CSS：

.my-flex-card > div > div.card {
  height: calc(100% - 15px);
  margin-bottom: 15px;
}

.row {
  margin-bottom: 50px;
}

那个 .row 功能不起作用。

这就是我的网站现在的样子：

谢谢你:)

Answer 1

.parent {
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.parent .child {
  padding-right: 10px;
  flex-grow: 1;
  width: 33%;
  position:relative;
}
.parent .child .content {
  height: 100%;
  box-shadow: 0 0 1em gray;
}
.content img{
 background-size:cover;
 width:100%;
}
.content h3,p{
padding:10px;
}
.content input{
position:absolute;
bottom:5px;
margin-left: 35%;
margin-top:10px;
}

<div class="parent">
  <div class="child">
    <div class="content">
      <div>
        <img  src="https://www.w3schools.com/html/pic_mountain.jpg"/>
        <h3> test 3</h3>
        <p>text text text text text text text text text text text text text text text text text text text</p>  
        </div>
         <div><input type="button" value="click" /></div> 
      </div>
    </div>
  <div class="child">
    <div class="content">  
       <div>
         <img  src="https://www.w3schools.com/html/pic_mountain.jpg"/>
         <h3> test 2</h3>
         <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex </p>
        </div>
         <div><input type="button" value="click" /></div> 
     </div>
 </div>
  <div class="child">
    <div class="content">
       <div>
         <img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
         <h3> test 1</h3>
         <p>text text  text text text text text text text text text text tex</p>  
       </div>
       <div><input type="button" value="click" /></div> 
    </div>
  </div>
</div>

Answer 2

制作相对位置的盒子类：

.boxClassName{
position:relative
}

然后使用以下内容制作按钮类：

  .buttonClassName{
    position:absolute;
    bottom:0;
    }