Bootstrap CSS按钮在文本之后的固定位置 [英] Bootstrap CSS button fixed position after text

问题描述

我试图在栏目中设置信息卡片。由于显示的文本有不同的长度，我想修正与卡片末尾相关的 Learn More 按钮的位置，所以无论以前发生什么，按钮始终都是对齐的。另外，我想在行之间分开卡片，但是我还没有找到解决方案，因为如果我更改边距，它只适用于最后一行

以下是我的代码：

 < div class =row my-flex-card> 
< div class =col-xs-4 col-sm-4 col-md-4 col-lg-4ng-repeat =女性在女性中> 
<！ -  Card  - > 
< div class =card> 
 <！ - 卡片图片 - > 
< img class =img-fluidng-src ={{woman.image_url}}alt ={{woman.name}}> 
 <！ - 卡片内容 - > 
< div class =card-body inline-block> 
 <！ - 标题 - > 
< h4 class =card-title> {{woman.name}}< / h4> 
<！ - 文字 - > 
< p class =card-text> < H5> {{woman.field}}< / H5> <峰; br> {{woman.job}}< / p为H. 
< a class =btn btn-successhref =＃！/ women / details / {{woman._id}}>了解更多< / 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功能无效。

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

谢谢：）

解决方案

  .parent {display：flex; flex-direction：row; padding：10px;}。parent .child {padding-right：10px; flex-grow：1;宽度：33％; position：relative;}。parent .child .content {height：100％; box-shadow：0 0 1em gray;}。content img {background-size：cover;内容输入{position：absolute; bottom：5px; margin-left：35％; margin-top：10px;}  width：100％;}。content h3，p {padding：10px;}。  
 
 < < div class =child> < div class =content> < DIV> < img src =https://www.w3schools.com/html/pic_mountain.jpg/> < H3>测试3< / h3> < p>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字< / p> < / DIV> < div>< input type =buttonvalue =click/>< / div> < / DIV> < / DIV> < div class =child> < div class =content> < DIV> < img src =https://www.w3schools.com/html/pic_mountain.jpg/> < H3>测试2< / h3> < p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本tex< / p> < / DIV> < div>< input type =buttonvalue =click/>< / div> < / DIV> < / DIV> < div class =child> < div class =content> < DIV> < img src =https://www.w3schools.com/html/pic_mountain.jpg/> < H3>测试1< / h3> < p>文本文本文本文本文本文本文本文本文本文本文本文本tex< / p> < / DIV> < div>< input type =buttonvalue =click/>< / div> < / DIV> < / div>< / div>  

I am trying to set cards with information in columns. As the texts displayed have different lenghts, I want to fixed the possition of the Learn More button related to the end of the card, so no matter what comes before, the buttons are always aligned.

Furthermore, I want to separate the cards between rows, but I haven't been able to find a solution yet, because if I change margins it only applies in the last row.

Here is my code:

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

My CSS:

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

.row {
  margin-bottom: 50px;
}

That .row feature isn't working.

This is how my website looks like right now:

Thank you :)

解决方案

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

这篇关于Bootstrap CSS按钮在文本之后的固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！