Question

我的横幅上有一幅带有狮子和一个文本框的图片。我已经将按钮的位置调整到了我想要的位置，但是当我将屏幕尺寸调整为< 768 px时，按钮并没有停留在卡内。我不明白为什么。

如何使按钮带有视口< 768px留在卡内，而又不影响所有其他按钮？

我删除了与该问题无关的代码：

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;
    }    
    .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: 40px;
          position: relative;
          align-items: inherit;
      }
    }

    @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 bottom-left">
                          <button class="btn btn-success">Read More</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </a>
    </div>

Answer 1

父包装div .bottom-left的按钮是绝对放置的。您将需要为其创建一个响应式样式，以删除绝对位置并使其与其余内容一起流动。

CSS：

@media (max-width: 768px)
.bottom-left {
    position: static;
    bottom: 8px;
    left: 16px;
    text-align: left; 
    padding-left: 20px; 
    padding-bottom: 5px;
}

按钮位于引导卡下方

1 个答案: