如何在保持响应式的同时缩小网页布局宽度？

我在制作网站网页布局时遇到问题：整体布局宽度过宽，希望屏幕两侧留有边距，但添加固定侧边边距后，原本的响应式效果丢失，小屏幕下页面显示极差。

原HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel = "stylesheet" href = "style.css">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <header class="header">
            <h1>Bootstrap</h1>
        </header>
        <article class="main">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. At, corporis quibusdam officia magnam asperiores exercitationem laboriosam dolorum hic minima pariatur?
            </p>
        </article>
        <footer class="footer">
            <h1>Footer</h1>
        </footer>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src = "web.js"></script>
</body>
</html>

原CSS代码 #

body{
    background-color: gray;
}
.wrapper{
    display:flex;
    flex-flow: row wrap;
    text-align: center;
    color: black;
}

.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    border-radius: 5px;
    margin: 10px;
}
.header{
    background: white;
    height: 250px;
}

.footer{
    background: white;
    height: 80px;
}
.main{
    text-align: left;
    background: white;
    height: 300px;
    font-size: 24px;
    height: 1200px;
}

错误尝试（导致响应式失效） #

.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    border-radius: 5px;
    margin: 10px 300px 10px 300px;
}

解决方案 #

方法1：利用Bootstrap自带容器类（推荐）

既然已经引入了Bootstrap，直接用它的.container类就能实现响应式侧边距，无需自定义复杂样式：

1. 修改HTML中.wrapper的类：

<div class="container wrapper">

2. 调整CSS中.wrapper > *的margin：

.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    border-radius: 5px;
    margin: 10px 0; /* 仅保留上下margin，左右边距由.container的响应式padding控制 */
}

.container会自动根据屏幕尺寸调整左右内边距，大屏幕时限制最大宽度并居中，小屏幕时占满宽度并保留合适的侧边留白，完美保留响应式效果。

方法2：纯CSS实现响应式边距

如果不想依赖Bootstrap，可通过max-width+margin:auto配合内边距实现：

1. 修改.wrapper的CSS：

.wrapper{
    display:flex;
    flex-flow: row wrap;
    text-align: center;
    color: black;
    max-width: 1200px; /* 根据需求设置最大宽度 */
    margin: 0 auto; /* 水平居中，自动生成两侧边距 */
    padding: 0 20px; /* 小屏幕下的侧边留白，避免内容贴边 */
}

2. 调整.wrapper > *的margin：

.wrapper > * {
    padding: 10px;
    flex: 1 100%;
    border-radius: 5px;
    margin: 10px 0;
}

问题根源 #

之前用固定的300px左右margin，在小屏幕（如手机宽度仅375px）时，元素总宽度会超出屏幕范围，导致横向滚动或布局挤压，直接破坏响应式逻辑。而上述两种方法都采用了自适应的边距/内边距，能适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者andy.malik