Question

我正在使用UIKit框架构建我的整个站点。我在使响应式网格工作时遇到了很多麻烦，我的代码已附上。

我希望网格在小于中间断点的所有屏幕上堆叠在一起。当我调整浏览器窗口大小时它非常有效，但是当我使用chrome在响应式测试中测试它时，它根本不起作用。另外值得注意的是，当我在本地测试页面而不将其上传到服务器时，响应式网格工作正常，但响应式高度和宽度类不起作用

提前致谢

<section id="past">
  <h1 class="uk-responsive-width uk-responsive-height">What Have I Done?</h1>
  <div class="uk-grid" data-uk-grid-margin>
    <div id="ccb" class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-3">
      <a href="#ccb_des" data-uk-modal="{center:true}">
        <img id="ccb_thumbnail" src="img/ccb_thumbnail_resize.jpg" alt="Cranbrook Culture Book" class="uk-border-rounded">
      </a>
    </div>

    <div id="cfc" class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-3">
      <a href="#cfc_des" data-uk-modal="{center:true}">
        <img id="cfc_thumbnail" src="img/cfc_thumbnail_resize.jpg" alt="Cranes for Change" class="uk-border-rounded">
      </a>
    </div>

    <div id="trombetta" class="uk-width-small-1-1 uk-width-medium-1-2 uk-width-large-1-3">
      <a href="#trombetta_des" data-uk-modal="{center:true}">
        <img width="300" height="200" id="trombetta_thumbnail" src="img/trombetta_thumbnail.jpg" alt="Trombetta Intern" class="uk-border-rounded">
      </a>
    </div>
  </div>
</section>

如何使用UIKit制作响应式网格？

0 个答案: