如何强制Div横向溢出排列？及图片底部栏横向展开实现

Hey there, let's get those elements arranged horizontally (instead of stacking vertically) and make the image bottom sheet scrollable side-to-side. Here's how to tweak your code:

Key Changes Needed #

We need to adjust the container's scrolling behavior and force the inner elements to stay in a single row:

• Switch the container from vertical to horizontal scrolling
• Disable wrapping for the Bootstrap row so buttons stay inline
• Ensure buttons don't take up full width

Updated Full Code #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<style>
.imageBottomSheet {
  overflow-x: auto; /* Enable horizontal scrolling instead of vertical */
  height: 170px; /* Slightly taller to fit image padding without clipping */
  white-space: nowrap; /* Prevent container content from wrapping */
}
.imageBottomSheet .row {
  flex-wrap: nowrap; /* Force Bootstrap's row to not wrap items */
}
img {
  padding: 0 5px;
  height: 150px;
}
.transparent-button {
  border: 0;
  background: transparent;
  display: inline-block; /* Make buttons sit next to each other */
}
</style>
<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>

Breakdown of Each Fix #

• Horizontal Scrolling: Changed .imageBottomSheet from overflow-y: scroll to overflow-x: auto so users can scroll left/right when content overflows. Added white-space: nowrap to keep all elements in a single line.
• No-Wrap Row: Bootstrap's .row defaults to wrapping items when space runs out—adding flex-wrap: nowrap (or using Bootstrap's built-in flex-nowrap class on the row) fixes this.
• Button Layout: Setting .transparent-button to display: inline-block ensures buttons don't stack vertically and stay side-by-side.

This will make your image bottom sheet expand horizontally with a scrollbar when needed, instead of stacking items vertically. Perfect for what you're trying to build!

内容的提问来源于stack exchange，提问作者dota2pro