如何用CSS为移动端HTML div设置最大宽度并解决内容溢出问题

阿华AIGC实验室

2026-5-8

Fixing Mobile Horizontal Scroll Overflow with CSS in MD Bootstrap

Absolutely! This is a super common responsive snag, and we can fix it with targeted CSS and MD Bootstrap utility tweaks. Let’s break down what’s likely causing the horizontal scroll and how to resolve it:

1. Tweak Container Padding for Small Screens

Looking at your code, you’re using px-5 for mobile (xs/sm breakpoints) and px-md-4 for larger screens. That px-5 might be adding too much horizontal padding on narrow mobile viewports, pushing your content beyond the screen width.

Try reducing the mobile padding to a smaller value like px-2 or px-1:

<div class="row mx-md-5 px-md-4 px-2 mt-3 container">
  <!-- Your existing content -->
</div>

If you want more control across breakpoints, use layered classes like px-sm-3 px-2 to adjust padding for small and extra-small screens separately.

2. Ensure Images Are Responsive

Unrestricted image widths are a frequent culprit for horizontal overflow. MD Bootstrap has a built-in img-fluid class that forces images to scale with their container:

<img src="your-image-source.jpg" class="img-fluid" alt="Descriptive alt text">

This will make sure your images never exceed the width of their parent container on any screen size.

3. Handle Long Text/Unbroken Content

Long words, URLs, or non-wrapping text can also cause overflow. Add these CSS rules to your .article class to force text to wrap:

.article p, .article h1 {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

Alternatively, use MD Bootstrap’s text-wrap utility class directly on text elements for a no-CSS fix:

<p class="text-wrap">Your long content here...</p>

4. Reset Container Margins/Padding (If Needed)

If the above steps don’t work, there might be conflicting styles overriding your container’s responsive behavior. Add this media query to force mobile-friendly spacing on small screens:

@media (max-width: 767.98px) {
  .row.container {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

The !important ensures this rule takes precedence over any conflicting styles.

5. Double-Check Your Viewport Meta Tag

Make sure your HTML <head> includes this critical tag—without it, responsive styles won’t work correctly on mobile:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Start with adjusting the container padding first (that’s usually the quick win), then work through the other steps if needed. This should eliminate the need to scroll horizontally on mobile.

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