注入されたコンテンツサイジングに関する問題

Question

私は「ライブ検索」機能を作成していますが、機能的にはうまく機能しますが、レスポンステストではタブレット/モバイルサイズになるとすぐに壊れます。

私はレイアウトのためにブートストラップを使用しています。ライブ検索の注入コンテンツは、基本的に単なるテンプレートです。

ここ

は、そのまま私の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>

、カードがポスト罰金に注入が、どのようにサイズを参照するには、以下の画面を見て行く：

デスクトップ：

ノートPC /タブレット：

モバイル：

あなたが見ることができるように、携帯電話で、それは完全に何らかの理由で破壊し、カードはお互いに「折り」が、ブートストラップに意図されている場合レイアウトを処理する、なぜこれが起こっているのですか？

検査官は大いに助けてくれませんし、私がここや他の場所で読んでいる記事もありません。これを修正する方法は誰にも分かりません。

ブートストラップ4とjquery 2を使用しています。

質問、ご意見、ご要望などございましたら、下記のコメントにお尋ねください。

Answer 1

フリップエフェクトCSSを修正する必要があります。ツイッターのブートストラップとは関係ありません。 .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/"); 
     } 
    } 
    } 
}