css - Bootstrap 中的网格系统

Question

我有一个场景需要以下大分辨率 View :

以及以下中小分辨率:

我试过:

<div class="row">
        <div class="img-blocks small-image col-lg-2 clearfix">
            <ul class="list-style">
                <li ng-repeat="img in productImgSrc track by $index">
                    <img ng-src={{img}} alt="...">
                </li>
            </ul>
        </div>
        <div class="img-blocks zoomed-image col-lg-10 clearfix">
            <img ng-src={{productImgSrc[0]}}  alt="...">
        </div>
    </div>

但它无法生成较小分辨率的 View 。

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用 CSS Flexbox。并使用媒体查询来反转不同屏幕尺寸的顺序。

在我的例子中，

• 小:最大宽度:991px (0px - 991px)
• 大:最小宽度:992px(992px > 无限)

看看我下面的代码片段(对于大屏幕使用全屏模式):

.main-block {
  display: flex;
  align-items: center;
  justify-content: center;
}

.list-style {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.list-style li {
  padding: 10px 10px 0 0;
}

/* For Small Screens */
@media screen and (max-width: 991px) {
  .main-block {
    display: flex;
    flex-direction: column-reverse;
  }

  .list-style {
    flex-direction: row;
  }

  .list-style li {
    padding: 10px;
  }
}

<div class="row main-block">
    <div class="img-blocks small-image col-lg-2 clearfix">
        <ul class="list-style">
            <li>
                <img src="http://placehold.it/40x40" alt="...">
            </li>
          <li>
                <img src="http://placehold.it/40x40" alt="...">
            </li>
          <li>
                <img src="http://placehold.it/40x40" alt="...">
            </li>
          <li>
                <img src="http://placehold.it/40x40" alt="...">
            </li>
          <li>
                <img src="http://placehold.it/40x40" alt="...">
            </li>
        </ul>
    </div>
    <div class="img-blocks zoomed-image col-lg-10 clearfix">
        <img src="http://placehold.it/400x300"  alt="...">
    </div>
</div>

希望这对您有所帮助!