Question

我正在Bootstrap 3中制作一些网格元素。在飞机上，我试图将按钮与狮子上的图片对齐在同一位置，但仅当视口位于{{1}以下时}。

当视口为< 768px时，按以下类别放置按钮：

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

Answer 1

将另一个类别添加到您的按钮标签中，例如btn-custom

<button type="button" class="btn btn-success bottom-right btn-custom">Read more</button>

在您的@media (max-width: 768px)块中添加以下内容

.btn-custom {
    position: static;
    width: fit-content;
    margin-top: 15px;
}

Answer 2

像这样向您的按钮标签添加另一个类

class="btn btn-success  bottom-right bottom-right-flex"

在CSS中@media部分（最大宽度：768px）

添加以下条目

.bottom-right.bottom-right-flex {
  position: absolute;
  bottom: 8px;
  left: 16px;
 }

这告诉它仅适用于元素如果两个右下和右下-flex类都出现在同一元素上。这将帮助您在该视口中定义该特定元素，而不会影响您的其他元素，同时在您的视口变大时，同时保持其当前右下角的CSS。

引导卡左侧的“对齐”按钮

2 个答案: