将Bootstrap 3按钮设置为在卡中具有相同位置
我试图将Bootstrap 3按钮对准水平线，如下图所示。这是我的demosite until now。我可以通过设置边距来对齐按钮，但是在所有视口上看起来都不错似乎是一个难题。
有没有一种对齐按钮的聪明方法？
我试图删除太多与该问题无关的代码。因此，以下代码未使用某些CSS类：
/* Track and trace */
.bs-calltoaction{
position: relative;
width:auto;
padding: 15px 25px;
border: 1px solid black;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
.bs-calltoaction > .row{
display:table;
width: calc(100% + 30px);
}
.bs-calltoaction > .row > [class^="col-"],
.bs-calltoaction > .row > [class*=" col-"]{
float:none;
display:table-cell;
vertical-align:middle;
}
.cta-contents{
padding-top: 10px;
padding-bottom: 10px;
}
.cta-title{
margin: 0 auto 15px;
padding: 0;
}
.cta-desc{
padding: 0;
}
.cta-desc p:last-child{
margin-bottom: 0;
}
.cta-button{
padding-top: 10px;
padding-bottom: 10px;
}
@media (max-width: 991px){
.bs-calltoaction > .row{
display:block;
width: auto;
}
.bs-calltoaction > .row > [class^="col-"],
.bs-calltoaction > .row > [class*=" col-"]{
float:none;
display:block;
vertical-align:middle;
position: relative;
}
.cta-contents{
text-align: center;
}
}
.bs-calltoaction.bs-calltoaction-info{
color: #fff;
background-color: #5bc0de;
border-color: #46b8da;
}
.bs-calltoaction.bs-calltoaction-info .cta-button .btn {
border-color:#fff;
}
.abc {
position: relative;
}
.def {
position: absolute;
top: 10px;
right: 20px;
max-width: 300px;
}
@media screen and (max-width: 480px) {
.def {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 480px;
width: 95%;
height: 85%;
}
.panel.panel-default .panel-heading {
padding: 5px 15px;
}
.panel.panel-default .panel-body {
padding: 5px;
}
}
/* Grid css */
p.bottom-column-color {
font-size: 0.82em;
color: green;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .cta {
width: 235px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .cta:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
}
@media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
@media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
.bottom-left {
position: static;
margin-left: 15px;
margin-bottom: 15px;
bottom: 8px;
left: 16px;
}
@media (max-width: 993px) {
.def {
position: relative;
top: auto;
right: auto;
}
}
@media (max-width: 480px){
.def {
position: relative;
top: 170px;
right: auto;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Kontakt Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End Trustbox script -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
<div>
<h4>Headline 1</h4>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<button type="button" class="btn btn-success bottom-left">See offer here</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
<div >
<h4>Headline 2</h4>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<button type="button" class="btn btn-success bottom-left">Read more</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
<div >
<h4>Headline 3</h4>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">Labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">Dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Consectetur adipiscing elit, sed do eiusmod tempor</p>
<button type="button" class="btn btn-success bottom-left">Read more</button>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://www.hdnicewallpapers.com/Walls/Thumb/Other%20Animals/Zebra_Animal_HD_Wallpaper.jpg"></img>
<div >
<h4>Headline 4</h4>
<p class="bottom-column-color">Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p class="bottom-column-color">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<button type="button" class="btn btn-success bottom-left">Read more</button>
</div>
</div>
</div>
</div>
</div>
</div>
1 个答案:
答案 0 :(得分：1)
我试图使其更简单，所以我对您的html进行了一些更改。为此，可能的解决方案是使用 flexbox ：）
看看。
欢呼
.row-eq-height [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.card {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
0 1px 10px 0 rgba(0, 0, 0, 0.12),
0 2px 4px -1px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.card{
margin-bottom: 20px;
}
.card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
0 6px 30px 5px rgba(0, 0, 0, 0.12),
0 8px 10px -5px rgba(0, 0, 0, 0.3);
cursor: pointer;
}
.card .card-title,
.card .card-body,
.card .card-btn {
padding: 0 15px;
}
.card .card-btn{
margin-top: auto;
padding-bottom: 15px;
}
.card-body p {
font-size: 0.82em;
color: green;
}
.card-img-top{
border-top-left-radius: 4px;
border-top-right-radius: 4px;
width: 100%;
min-height: 1px; /* trick for IE11 */
}
@media (min-width: 768px) {
.row-eq-height{
display: flex;
}
.row-eq-height [class*="col-"] {
display: flex;
flex: 1;
}
.card{
display: flex;
flex-direction: column;
flex: 1;
}
} <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<div class="container">
<div class="row row-eq-height">
<div class="col-xs-12 col-sm-3">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/300/200" >
<h4 class="card-title">Headline 1</h4>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="card-btn">
<button type="button" class="btn btn-success">See offer here</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/300/200" >
<h4 class="card-title">Headline 2</h4>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div class="card-btn">
<button type="button" class="btn btn-success">See offer here</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/300/200" >
<h4 class="card-title">Headline 3</h4>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p>Labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p>Dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Consectetur adipiscing elit, sed do eiusmod tempor</p>
</div>
<div class="card-btn">
<button type="button" class="btn btn-success">See offer here</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-3">
<div class="card">
<img class="card-img-top" src="https://picsum.photos/300/200" >
<h4 class="card-title">Headline 4</h4>
<div class="card-body">
<p>Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor</p>
<p>incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
<div class="card-btn">
<button type="button" class="btn btn-success">See offer here</button>
</div>
</div>
</div>
</div>
</div>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？