有什么方法可以使列表组在大屏幕上垂直放置，在小屏幕上水平放置？

Question

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

Answer 1

在大屏幕上为垂直，在小屏幕上为水平

默认情况下，列表组的灵活方向为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-*。

Answer 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