我正在 Bootstrap 3 中制作一些网格元素。在飞机图片上，我试图将按钮对齐到与狮子图片相同的位置，但只有当视口(viewport)低于 < 768px 时才会这样做。 .
当视口(viewport)为> 768px时我使用以下类定位按钮:
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
如何在不影响网格上任何其他按钮的情况下更改按钮的位置？有很多按钮使用类 bottom-right
最终结果应该是这样的:
我已经删掉了尽可能多的与问题无关的代码
body {
background-color: #f5f5f5;
}
.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;
height: 400px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
/* Set width between grid 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;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons in a single grid element */
.inner-wrapper {
text-align: center;
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.header-textbox-bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.card-content {
display: flex;
padding: 30px 0px;
justify-content: space-between;
align-items: flex-end;
}
.card-content__info {
display: flex;
flex-direction: column;
left: 3em;
position: relative;
/* text-transform: uppercase; */
}
.card-content__info > h4 {
padding: 0 !important;
margin: 5px 0 !important;
}
/* Set full width on columns */
@media (max-width: 768px) {
.img-responsive {
width: 100%;
}
.index-content .card img {
height: 100%
}
.card-content__info {
flex-direction: column;
left: 0;
}
.card-content {
flex-direction: column;
left: 20px;
position: relative;
align-items: inherit;
}
/* Position button on banner with textbox */
.header-textbox-bottom-left {
position: static;
bottom: 8px;
left: 16px;
text-align: left;
padding-left: 20px;
padding-bottom: 5px;
}
}
@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,
.card-content span {
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%
}
}<div class="row">
<a href="#">
<div class="col-sm-12 small-padding top bottom">
<div class="index-content">
<div class="card">
<img src="https://www.sardiustours.com/wp-content/uploads/2016/09/lion-1118467_1920-Copy.jpg"></img>
<div class="card-content-textbox flexbox-column">
<h4>BMW & HEADLINE 2018</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="inner-wrapper header-textbox-bottom-left">
<button class="btn btn-success">Read More</button>
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="row">
<div class="col-sm-12 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="https://s-media-cache-ak0.pinimg.com/originals/87/bf/cf/87bfcfb36780c0fec472d8d301be7a1c.jpg"></img>
<div class="card-content">
<div class="card-content__info">
<h4>HIGH SERVICELEVEL AND QUALITY</h4>
<span>Book a meeting and let's find a solution</span>
</div>
<button type="button" class="btn btn-success bottom-right">Read more</button>
</div>
</div>
</div>
</div>
</div>最佳答案
向您的按钮标签添加另一个类，例如btn-custom
<button type="button" class="btn btn-success bottom-right btn-custom">Read more</button>
在您的 @media (max-width: 768px) 中添加以下内容 block
.btn-custom {
position: static;
width: fit-content;
margin-top: 15px;
}关于html - Bootstrap 卡片中的左对齐按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51600532/