Question

我正在创建一个＆＃34;实时搜索＆＃34;功能，这在功能上很好，但是，在响应式测试中，它几乎会在您达到平板电脑/移动设备尺寸时中断。

我正在使用bootstrap进行布局，实时搜索中注入的内容基本上只是一个注入的模板。

以下是我的HTML，SCSS和JS：

＆＃13;

$(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;
  });

});

＆＃13;

.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/");
      }
    }
  }
}

＆＃13;

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

＆＃13;

现在，这些卡片可以很好地注入帖子，但请查看以下屏幕以了解尺寸如何：

桌面：

笔记本/平板：

移动：

正如你所看到的，在移动设备上，由于某些原因它完全打破了卡片＆＃34;折叠＆＃34;相互之间，但如果bootstrap是为了处理布局，为什么会发生这种情况呢？

检查员不是很有帮助，也不是我在这里和其他地方读过的一些文章，不同寻常的是，任何人都对如何解决这个问题有任何想法？

如果有帮助，我正在使用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/");
      }
    }
  }
}

注入内容大小的问题

1 个答案: