本文介绍了Bootstrap CSS按钮在文本之后的固定位置的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述 29岁程序员,3月因学历无情被辞! 我试图在栏目中设置信息卡片。由于显示的文本有不同的长度,我想修正与卡片末尾相关的 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;}。 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按钮在文本之后的固定位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持! 上岸,阿里云!