代码之家 › 专栏 › 技术社区 › dota2pro Matej

如何强制div水平溢出而不是垂直溢出?

bootstrap-4 css html

dota2pro Matej · 技术社区 · 6 年前

如何强制它水平而不是垂直传播?

.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>

1 回复 | 直到 6 年前

Temani Afif 6 年前

简单添加 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>