Question

我如何强制其水平传播而不是垂直传播？

.imageBottomSheet {
  overflow-y: scroll;
  height: 150px;
}

img {
  padding: 0 5px 0 5px;
  height: 150px;
}

.transparent-button {
  border: 0;
  background: transparent;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="imageBottomSheet">

    <div class="row">
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>


    </div>


  </div>

</body>

Answer 1

只需将flex-nowrap添加到行（https://getbootstrap.com/docs/4.3/utilities/flex/#wrap）

.imageBottomSheet {
  overflow-y: scroll;
  height: 150px;
}

img {
  padding: 0 5px 0 5px;
  height: 150px;
}

.transparent-button {
  border: 0;
  background: transparent;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="imageBottomSheet">

    <div class="row flex-nowrap">
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>

      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>
      <button class="transparent-button">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/1/10/Winniethepooh.png/220px-Winniethepooh.png">
      </button>


    </div>


  </div>

</body>

如何迫使div水平而不是垂直连续溢出？

1 个答案: