移动端网页布局适配问题：导航按钮与4列盒子需保持横向对齐

Hey there! Let's tackle this responsive layout problem you're dealing with. It sounds like your current setup stacks navigation buttons and content boxes vertically on mobile, but you want to keep them in horizontal/4-column layouts—just scaled down instead of rearranged. Here's a step-by-step solution using CSS media queries:

1. Keep Navigation Buttons Horizontal on Mobile #

First, let's target your navigation container (assuming it's using flexbox, which is common for navs). If your current mobile styles are setting flex-direction: column, we'll override that to keep it horizontal, then tweak sizing to fit:

/* Target mobile screens (adjust max-width to match your breakpoint) */
@media (max-width: 768px) {
  /* Replace .nav-container with your actual nav selector */
  .nav-container {
    flex-direction: row !important; /* Force horizontal layout */
    gap: 0.5rem; /* Reduce spacing between buttons */
    overflow-x: auto; /* Add horizontal scroll if buttons don't fit */
    padding: 0.5rem;
  }

  /* Shrink navigation buttons */
  .nav-container .nav-button {
    font-size: 0.8rem; /* Smaller text */
    padding: 0.4rem 0.8rem; /* Reduced padding */
    white-space: nowrap; /* Prevent button text from wrapping */
  }
}

2. Maintain 4-Column Layout for Content Boxes #

For your content boxes, if you're using CSS Grid (recommended for column layouts), we'll ensure the grid stays at 4 columns on mobile instead of switching to 1. If you're using flexbox, we'll adjust flex properties to keep 4 items per row:

Option A: CSS Grid Approach #

@media (max-width: 768px) {
  /* Replace .content-grid with your actual content container selector */
  .content-grid {
    grid-template-columns: repeat(4, 1fr); /* Force 4 equal columns */
    gap: 0.6rem; /* Reduce gap between boxes */
    padding: 0 0.5rem;
  }

  /* Shrink content boxes */
  .content-grid .box {
    padding: 0.8rem;
    font-size: 0.9rem;
  }
}

Option B: Flexbox Approach #

@media (max-width: 768px) {
  /* Replace .content-container with your actual content container selector */
  .content-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0 0.5rem;
  }

  .content-container .box {
    flex: 1 1 calc(25% - 0.6rem); /* Force 4 items per row (25% width minus gap) */
    min-width: 0; /* Allow boxes to shrink beyond content width */
    padding: 0.8rem;
    font-size: 0.9rem;
  }
}

Key Notes #

• Adjust the max-width in the media query to match your site's mobile breakpoint (common values are 768px, 480px).
• Tweak the font-size, padding, and gap values until everything fits nicely on small screens.
• The overflow-x: auto on the nav ensures users can scroll horizontally if buttons still don't fit—this is a graceful fallback.

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