Question

我有三个带 Bootstrap 3 的DIV容器，其中前两个位于第一行，第三个位于下一行，直到浏览器宽度达到991 px。高于992 px，所有三个容器应排成一行。每行容器的高度应最高（100％）。

我的示例可以以 Chrome 的方式运行。不幸的是， macOS 和 iOS 上的 Safari 没有。在Safari中，小于992px的两个第一个容器在另一个容器的下方而不是并排显示。

此问题的解决方法是什么？

.inner-container{
          background-color: #f0f0f0;
          padding: 10px;
          font-size: 16px;
          height: 100%;
        }

        @media (max-width: 991px) {
          .map{
            height: 250px;
            margin-top: 15px;
          }
          .row{
            display: flex;
            flex-wrap: wrap;
          }
        }

        @media (min-width: 992px) {
          .row{
            display: flex;
          }
        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
          <div class="row">
            <div class="col-xs-6 col-md-4">
                <div class="inner-container">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
                </div>
            </div>
            <div class="col-xs-6 col-md-4">
                <div class="inner-container">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. AtLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-4">
                <div class="inner-container map">
                    <p>map</p>
                </div>
            </div>
          </div>
        </div>

Answer 1

in this row take outer container div place all 3 div in container
<div class="div-container">
</div>

 @media (min-width: 992px) {
      .div-container{
        display: inline-block;
      }
    }

Answer 2

尝试一下：

@media (max-width: 991px) {
  .map{
    height: 250px;
    margin-top: 15px;
  }
  .row{
    display: -webkit-flex; #this
    display: flex;
    -webkit-flex-wrap: wrap; #this
    flex-wrap: wrap;
  }
}

有关更多信息，请检查this。

为什么用flex-wrap：wrap在Safari中不起作用

2 个答案: