时间戳

首页 > 解决方案 > 响应式列表样式

css - 响应式列表样式

问题描述

我正在尝试在 React中做这样的事情。我有一个动态的位置数组，并希望使其响应。如果位置的数量不能容纳在一行中，则显示更多剩余位置的数量。如果我更改浏览器宽度，它应该显示一个响应式数组。

<section class="thumbnails">
  <a href="#" class="thumbnails__item"><span>Home</span></a>
  <a href="#" class="thumbnails__item"><span>Blog</span></a>
  <a href="#" class="thumbnails__item"><span>News</span></a>
  <a href="#" class="thumbnails__item"><span>Portfolio</span></a>
  <a href="#" class="thumbnails__item"><span>Team</span></a>
  <a href="#" class="thumbnails__item"><span>Mission</span></a>
  <a href="#" class="thumbnails__item"><span>Location</span></a>
  <a href="#" class="thumbnails__item"><span>Forum</span></a>
  <div class="thumbnails__count">
    <p class="thumbnails__count-text">
      +<span class="thumbnails__count-value"></span> more items
    </p>
  </div>
</section>

谢谢

标签： cssreactjssassresponsive-designnext.js

解决方案

推荐阅读