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

【问题标题】：Is there any way to make list-group vertical on big screens and horizontal on small?有没有办法让列表组在大屏幕上垂直，在小屏幕上水平？
【发布时间】：2020-04-07 10:11:02
【问题描述】：

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

【问题讨论】：

你可以颠倒规则......但你为什么要这样做？如果您有两个以上的项目，则需要在移动设备上以水平布局滚动。
可以吗？我需要它，因为这是我拥有的设计布局。在移动设备上带有命名的垂直列表组和仅带有数字 (1-7) 的水平列表组。这就是我必须做的。

标签： bootstrap-4

【解决方案1】：

大屏竖屏，小屏横屏

默认情况下，list-group 的 flex-direction 是column。您只需将其设置为row 用于小屏幕，然后将其重置为column 用于大屏幕。为此，请使用 flex-*-column 和 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-*。

【讨论】：

【解决方案2】：

Bootstrap 中没有针对这种行为的原生类。但是使用 SASS 很容易创建一个：

@include media-breakpoint-down(sm) {
  .list-group-horizontal-sm-down {
    flex-direction: row;

    .list-group-item {
      &:first-child {
        @include border-bottom-left-radius($list-group-border-radius);
        @include border-top-right-radius(0);
      }

      &:last-child {
        @include border-top-right-radius($list-group-border-radius);
        @include border-bottom-left-radius(0);
      }

      &.active {
        margin-top: 0;
      }

      & + .list-group-item {
        border-top-width: $list-group-border-width;
        border-left-width: 0;

        &.active {
          margin-left: -$list-group-border-width;
          border-left-width: $list-group-border-width;
        }
      }
    }
  }
}

这是一个基本的用法示例：

<ul class="list-group list-group-horizontal-sm-down">
  <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>

参考：https://github.com/twbs/bootstrap/blob/master/scss/_list-group.scss#L93

【讨论】：