問題與注入的內容大小

Question

我正在創建一個「實時搜索」功能，這工作得很好功能，但是，在響應測試，它幾乎一達到平板電腦/手機大小就打破。

我使用bootstrap進行佈局，而實時搜索的注入內容基本上只是一個注入的模板。

這裏是我的HTML，SCSS和JS，因爲它代表：

$(function() { 
 
    $(".brand-page-search-box").on("input", function(e) { 
 
    e.preventDefault(); 
 

 
    var containerTemplate, 
 
     itemTemplate, 
 
     root = 'http://jsonplaceholder.typicode.com'; 
 

 
    containerTemplate = `<div class="row search-result-item-container"></div>`; 
 

 
    $.ajax({ 
 
     url: root + '/posts/1', 
 
     method: 'GET' 
 
    }).then(function(data) { 
 
     $(".search-results").html(containerTemplate); 
 

 

 
     let returnedJSONToObj = JSON.parse(JSON.stringify(data)), 
 
     userID = returnedJSONToObj.userId, 
 
     id = returnedJSONToObj.id, 
 
     title = returnedJSONToObj.title, 
 
     body = returnedJSONToObj.body; 
 

 
     itemTemplate = `<div class="col-xs-12 col-sm-6 col-lg-4"> 
 
           <div class="flip-container"> 
 
            <div class="card card-inverse"> 
 
             <div class="front"> 
 
              <div class="card-block"> 
 
               <h3 class="card-title">${title}</h3> 
 
               <p class="card-text">${body}</p> 
 
               <a href="#" class="btn btn-primary">Button</a> 
 
              </div> 
 
             </div> 
 
             <div class="back"> 
 
              <div class="card-block"> 
 
               <h3 class="card-title">${title}</h3> 
 
               <p class="card-text">${body}</p> 
 
               <a href="#" class="btn btn-primary">Button</a> 
 
              </div> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div> 
 
          <div class="col-xs-12 col-sm-6 col-lg-4"> 
 
           <div class="flip-container"> 
 
            <div class="card card-inverse"> 
 
             <div class="front"> 
 
              <div class="card-block"> 
 
               <h3 class="card-title">${title}</h3> 
 
               <p class="card-text">${body}</p> 
 
               <a href="#" class="btn btn-primary">Button</a> 
 
              </div> 
 
             </div> 
 
             <div class="back"> 
 
              <div class="card-block"> 
 
               <h3 class="card-title">${title}</h3> 
 
               <p class="card-text">${body}</p> 
 
               <a href="#" class="btn btn-primary">Button</a> 
 
              </div> 
 
             </div> 
 
            </div> 
 
           </div> 
 
          </div>`; 
 

 
     $(".search-result-item-container").append(itemTemplate); 
 
    }); 
 

 
    return false; 
 
    }); 
 

 
});

.flip-container { 
 
    -webkit-perspective: 1000; 
 
    perspective: 1000; 
 
    .card { 
 
    position: relative; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    &: hover { 
 
     transform: rotateY(180deg); 
 
     -webkit-transform: rotateY(180deg); 
 
    } 
 
    .front, 
 
    .back { 
 
     width: 100%; 
 
     height: 100%; 
 
     position: absolute; 
 
     backface-visibility: hidden; 
 
     -webkit-backface-visibility: hidden; 
 
    } 
 
    .front { 
 
     z-index: 2; 
 
     .card-block { 
 
     background: url("http://lorempixel.com/1920/1080/"); 
 
     } 
 
    } 
 
    .back { 
 
     -webkit-transform: rotateY(180deg); 
 
     transform: rotateY(180deg); 
 
     .card-block { 
 
     background: url("http://lorempixel.com/900/500/"); 
 
     } 
 
    } 
 
    } 
 
}

<div class="container-fluid brand-search-bar"> 
 
    <div class="row"> 
 
    <div class="col-xs-12"> 
 
     <nav class="navbar"> 
 
     <div class="container"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="nav-item"> 
 
       <form action="#" id="form"> 
 
       <div class="input-group"> 
 
        <input type="text" class="form-control brand-page-search-box" placeholder="Search"> 
 
        <span class="input-group-btn"> 
 
             <button type="submit" class="btn"> 
 
    <i class="fa fa-search" aria-hidden="true"></i> 
 
</button> 
 
            </span> 
 
       </div> 
 
       </form> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </nav> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container brand-img-container search-results"></div>

現在，卡注入後罰款，但看看下面的屏幕怎麼看大小云：

桌面：

筆記本電腦/平板電腦：

手機：

正如你所看到的，在移動設備上，它完全打破了某些原因而卡「摺疊」到彼此，但如果引導是指處理佈局，爲什麼會發生這種情況？

檢查員沒有太多的幫助，也沒有一些我一直在這裏和其他地方閱讀的文章，異乎尋常地，任何人有任何想法如何解決這個問題？

我使用bootstrap 4和jquery 2，如果有幫助。

如果您有任何疑問，意見或要求，請在下面的評論中提問。

Answer 1

您需要修復翻轉效果css。與twitter bootstrap無關。 你的.flip-container沒有得到高度，所以在xs的時候，當你看到許多容器堆棧的問題。

您可以設置一個固定的高度爲您.flip-container但因爲你要動態高度這裏是一個解決方案

添加.front{ position:relative}和.back{top: 0}

.flip-container { 
    -webkit-perspective: 1000; 
    perspective: 1000; 
    .card { 
    position: relative; 
    -webkit-transition: all 1s ease; 
    transition: all 1s ease; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    &:hover { 
     transform: rotateY(180deg); 
     -webkit-transform: rotateY(180deg); 
    } 
    .front, 
    .back { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     backface-visibility: hidden; 
     -webkit-backface-visibility: hidden; 
    } 
    .front { 
     z-index: 2; 
     position:relative; <--- 
     .card-block { 
     background: url("http://lorempixel.com/1920/1080/"); 
     } 
    } 
    .back { 
     -webkit-transform: rotateY(180deg); 
     transform: rotateY(180deg); 
     top:0; <--- 
     .card-block { 
     background: url("http://lorempixel.com/900/500/"); 
     } 
    } 
    } 
}