我正在为我的网站制作网页布局，但遇到了一个问题。布局的整体宽度太大，我希望在屏幕两侧留一些边距。布局React灵敏，但当我在两侧添加边距时，响应性就消失了，页面在小屏幕上看起来很糟糕。
网址：
<!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;
}
2条答案
按热度按时间velaa5lx1#
您可能需要在CSS中使用@media
soat7uwm2#
最简单的方法是给予.wrapper一个最大宽度，并设置边距使其居中
}