Bootstrap按钮响应式问题求助：计算器小屏按钮垂直排列异常

Hey there, let's figure out why your calculator's buttons are stacking vertically on screens smaller than ~760px and fix that clunky mobile layout issue.

First, let's break down the likely culprits in your current setup:

• Your #middleDiv uses a fixed width (280px), which doesn't shrink gracefully on tiny screens. Combine that with fixed-width buttons (50px) and hardcoded margins, and you run out of horizontal space fast—forcing buttons to stack.
• You mentioned trying row-fluid, but that's a Bootstrap 2 class; modern Bootstrap versions use .row with grid columns to handle responsive layouts, which you're not leveraging right now.
• The negative left margin on .btn-sq-sm (margin-left:-5px) might be throwing off spacing calculations, making it even harder for buttons to fit in the container.

Here's a step-by-step fix to get your buttons behaving responsively:

1. Make the Calculator Container Responsive #

First, update your #middleDiv to adapt to smaller screens instead of staying fixed-width. We'll use a percentage width for small screens and a smoother centering method:

#middleDiv{
  position: absolute;
  max-width: 280px; /* Keep max width for larger screens */
  width: 90%; /* Take 90% of screen width on small devices */
  height: auto; /* Let height adjust based on content */
  z-index: 15;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Smoother, responsive centering */
  background-color: #BEBEBE;
  border-radius:25px;
  padding:20px;
  padding-top:30px;
  box-shadow: 10px 10px 5px black;
}

2. Use Bootstrap Grid for Button Layout #

Instead of relying on fixed-width buttons, use Bootstrap's grid system to arrange buttons into columns that adjust based on screen size. Wrap your buttons in .row and assign .col-* classes to each button container:

<!-- Example row for number buttons -->
<div class="row g-2"> <!-- g-2 adds small gaps between buttons -->
  <div class="col-3">
    <button class="btn btn-sq-sm">7</button>
  </div>
  <div class="col-3">
    <button class="btn btn-sq-sm">8</button>
  </div>
  <div class="col-3">
    <button class="btn btn-sq-sm">9</button>
  </div>
  <div class="col-3">
    <button class="btn btn-sq-sm">÷</button>
  </div>
</div>

<!-- For the wide "0" button, use col-6 -->
<div class="row g-2">
  <div class="col-6">
    <button class="btn btn-sq-sm btn-spec">0</button>
  </div>
  <div class="col-3">
    <button class="btn btn-sq-sm">.</button>
  </div>
  <div class="col-3">
    <button class="btn btn-sq-sm">=</button>
  </div>
</div>

3. Update Button Styles to Fit the Grid #

Modify your button classes to inherit width from their grid columns instead of using fixed widths. This ensures buttons fill their column space without overflowing:

.btn-sq-sm {
  width: 100%; /* Fill the parent column */
  height: 50px; /* Keep consistent height */
  font-size: 10px;
  margin-top: 10px;
  text-align: center;
  /* Remove margin-left/-right—let Bootstrap's grid gutters handle spacing */
}

.btn-spec {
  height: 50px; /* Match other button heights */
  font-size: 10px;
  margin-top: 10px;
  /* No need for !important width here—col-6 already controls width */
}

4. Tweak Small Screen Styles #

Adjust your media query to refine button size on extra-small screens:

@media screen and (max-width: 480px) {
  .btn-sq-sm, .btn-spec {
    padding: 2px 4px;
    font-size: 80%;
    line-height: 1;
    border-radius: 3px;
    height: 40px; /* Shrink height for tiny screens */
  }
}

Why This Works #

By using Bootstrap's grid system, you're letting the framework handle responsive column sizing—buttons will stay in rows as long as there's space, and only stack if the screen is truly too small (which makes sense for the tiniest phones). The responsive container ensures the calculator doesn't get cut off or overflow on mobile.

Give these changes a try, and your calculator should have a much cleaner, user-friendly mobile layout!

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