代码之家  ›  专栏  ›  技术社区  ›  MK-DK

引导卡没有响应

  •  0
  • MK-DK  · 技术社区  · 7 年前

    我真的很头疼。当我在手机上看到下面的bootstrap 3卡时,我可以将网页左右移动。因此,我的CSS有问题。

    我已经找了几个小时了,但不知道错误在哪里。有人能帮我解决这个问题吗?

    The demosite is here

    我删掉了很多与问题无关的html。因此,有些css类不在下面的html中使用。

    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: 10px 10px;
          justify-content: space-between;
          align-items: flex-end;
        }
        
        .card-content__info {
          display: flex;
          flex-direction: column;
          left: 3em;
          position: relative;
        }
        
        .card-content__info > h4 {
          padding: 0 !important;
          margin: 5px 0 !important;
          text-transform: uppercase; 
        }
        .sub-headline {
          color:#00a9ff !important;
          text-transform: uppercase; 
          font-size:20px;"
        }
        /* 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;
          }
          
          .btn-custom {
            position: static;
            width: fit-content;
            margin-top: 15px;
          }
          .btn-success {
            width: fit-content;
          }
    
        }
    
        @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="container">
        <!-- Partnerværksteder -->
        <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>Højt serviceniveau og kvalitet</h4>
                              <span class="sub-headline">Find nærmeste mercedes partnerværksted</span>  
                            </div>   
                            <button type="button" class="btn btn-success bottom-right btn-custom">Find et værksted</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    1 回复  |  直到 7 年前
        1
  •  3
  •   Eduardo Paoli    7 年前

    跟随一个显示div破坏了你的布局的图像。

    您需要更改css的这一部分。

    //删除所有批注样式

    .card-content {
        display: flex;
        padding: 10px 30px;
        justify-content: space-between;
        /* align-items: flex-end; */
    }
    
    
    @media (max-width: 768px) { 
      .card-content {
        flex-direction: column;
    
        /* left: 20px; */
        /* position: relative; */
        /* align-items: inherit; */
        /* max-width: 100%; */
        /* width: 100%; */
      }   
    
    }

    enter image description here