Question

我正在使用从tabler下载的临时模板，您可以在https://preview.tabler.io/看到该模板的演示，并且我想向左和向右滚动小卡片，如果我要增加小卡片的数量则为6，那么它们就是显示在下面，但我希望它们可以水平滚动。

<div class="row row-cards">
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-green">
                  6%
                  <i class="fe fe-chevron-up"></i>
                </div>
                <div class="h1 m-0">43</div>
                <div class="text-muted mb-4">New Tickets</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-red">
                  -3%
                  <i class="fe fe-chevron-down"></i>
                </div>
                <div class="h1 m-0">17</div>
                <div class="text-muted mb-4">Closed Today</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-green">
                  9%
                  <i class="fe fe-chevron-up"></i>
                </div>
                <div class="h1 m-0">7</div>
                <div class="text-muted mb-4">New Replies</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-green">
                  3%
                  <i class="fe fe-chevron-up"></i>
                </div>
                <div class="h1 m-0">27.3K</div>
                <div class="text-muted mb-4">Followers</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-red">
                  -2%
                  <i class="fe fe-chevron-down"></i>
                </div>
                <div class="h1 m-0">$95</div>
                <div class="text-muted mb-4">Daily Earnings</div>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-lg-2">
            <div class="card">
              <div class="card-body p-3 text-center">
                <div class="text-right text-red">
                  -1%
                  <i class="fe fe-chevron-down"></i>
                </div>
                <div class="h1 m-0">621</div>
                <div class="text-muted mb-4">Products</div>
              </div>
            </div>
          </div>
        </div>

Answer 1

我建议您在IFrame中使用包含图像的代码进行滚动：

Index.htm

<iframe src="images.htm"></iframe>

images.htm

<span><img src="IMAGE.png"></img><img src="IMAGE.png"></img><img src="IMAGE.png"></img></span>

这只是我脑子里写的东西，可能有问题

Answer 2

基于Overflow-x not working

.row {
  width: 100%; /* Your choice*/
  overflow-x: auto;
  white-space: nowrap;
}

.row>div {
  border: 1px solid;
  min-width: 150px; /* Your choice*/
  display: inline-block;
}

<div class="row row-cards">
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-green">
          6%
          <i class="fe fe-chevron-up"></i>
        </div>
        <div class="h1 m-0">43</div>
        <div class="text-muted mb-4">New Tickets</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-red">
          -3%
          <i class="fe fe-chevron-down"></i>
        </div>
        <div class="h1 m-0">17</div>
        <div class="text-muted mb-4">Closed Today</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-green">
          9%
          <i class="fe fe-chevron-up"></i>
        </div>
        <div class="h1 m-0">7</div>
        <div class="text-muted mb-4">New Replies</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-green">
          3%
          <i class="fe fe-chevron-up"></i>
        </div>
        <div class="h1 m-0">27.3K</div>
        <div class="text-muted mb-4">Followers</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-red">
          -2%
          <i class="fe fe-chevron-down"></i>
        </div>
        <div class="h1 m-0">$95</div>
        <div class="text-muted mb-4">Daily Earnings</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-sm-4 col-lg-2">
    <div class="card">
      <div class="card-body p-3 text-center">
        <div class="text-right text-red">
          -1%
          <i class="fe fe-chevron-down"></i>
        </div>
        <div class="h1 m-0">621</div>
        <div class="text-muted mb-4">Products</div>
      </div>
    </div>
  </div>
</div>

卡项目的水平滚动

2 个答案: