如何在 bootstrap 中为多行多列制作水平滚动条？

Question

我希望多行多列仅通过一个滚动条水平滚动。我可以设法只为一行和多列制作滚动条我尝试了以下但我只能为行制作滚动条。下面给出的是我试过的代码

.page {
  width: auto;
  margin: auto;
}

.hs {
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  width: 100%;
  padding: 0 10% 2rem 0%;
}

.hs .item {
  display: inline-block;
  width: auto;
  text-align: center;
  margin-right: 0.75rem;
  height: 100%;
  white-space: normal;
}

 ::-webkit-scrollbar {
  height: 15px;
}

 ::-webkit-scrollbar-track-piece {
  background-color: gray;
}

.li {
  text-decoration: none;
}

<div class="container page">
  <ul class="hs">
    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>

    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>

    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>


    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>


    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>


    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>


    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>

    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>

    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>

    <li class="item">
      <div class="col-lg-3 col-md-4 col-sm-6 ">
        <div class="card border-0" style="width: 15rem;">
          <img class="card-img-top" src="images/image 25.png" alt="Card image cap">
        </div>
      </div>
    </li>

  </ul>

</div>

Answer 1

您可以使用：

在 div 标签中你可以使用这些属性 {

   <div class="my-custom-scrollbar my-custom-scrollbar-primary">

}

在您的样式标签中使用此代码

{

.my-custom-scrollbar {
 position: relative;
 width: 800px;
 height: 400px;
 overflow: auto;
  }

}

Answer 2

您需要为 <ul> 标签指定高度和宽度。这将决定你的身高。然后你需要像 overflox-y: scroll; 一样设置 ul 的样式。这将使您的列表成为滚动条。如果行不通，请尝试 overflow-y: auto;.

例子

ul{
  height: 200px;
  max-height: 200px;
  width: 200px;
  border: 2px solid blue;
  overflow-y: scroll;
}

li{
height: 50px;
border: 2px solid black;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width = device-width, initial-scale = 1.0">
        <meta http-equiv="X-UA-Compatible" content = "ie=edge">
        <title> Keat </title>
    </head>
    
    <body>
        <ul>
          <li>Li-1</li>
          <li>Li-2</li>
          <li>Li-3</li>
          <li>Li-4</li>
          <li>Li-5</li>
          <li>Li-6</li>
        </ul>
    </body>
</html>

如何在 bootstrap 中为多行多列制作水平滚动条？

How to make horizontal scrollbar for multiple rows and columns in bootstrap?

html

css

grid

frontend

bootstrap-4