时间戳

首页 > 解决方案 > 有没有办法让列表组在大屏幕上垂直，在小屏幕上水平？

bootstrap-4 - 有没有办法让列表组在大屏幕上垂直，在小屏幕上水平？

问题描述

我需要在小屏幕尺寸上使用水平列表组，但我能找到的唯一解决方案与此相反。list-group-horizo​​ntal 的工作方式 - 在小屏幕上垂直，在屏幕增长时水平。在这种情况下我能做什么？我尝试创建 2 个不同的列表组，但它们不能一起工作。

标签： bootstrap-4

解决方案

大屏竖屏，小屏横屏

默认情况下，list-group 的flex-direction是column. 您只需将其设置row为小屏幕，然后将其重置column为大屏幕。为此，请使用flex-*-columnand flex-row。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col mt-5">
      <ul class="list-group flex-sm-column flex-row">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/gJxBLP

小屏竖屏，大屏横屏

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col mt-5">
      <ul class="list-group flex-column flex-sm-row">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
    </div>
  </div>
</div>

https://codepen.io/anon/pen/KLvGNX

我用过flex-sm-*。您可能需要使用flex-md-*或flex-lg-*。

推荐阅读