我是新的网络开发，我试图复制这个网站对我自己。
现在我遇到了一个问题。
我不知道为什么要花车：left（在@media下）无法正常工作。我已确保应用了框大小调整：border-box以允许在元素的总宽度和高度中包含填充和边框。
下面是我的代码：
* {
box-sizing: border-box;
}
body{
margin-top: 40px;
background-color: #F9F9FB;
}
.container-fluid {
margin-top: 50px;
}
h3 {
border-left: 1px solid black;
border-bottom: 1px solid black;
margin: 0px;
padding: 1px;
width: 33.33%;
height: 28px;
float: right;
text-align: center;
background-color: #B59F84;
}
.row div {
border: 1px solid black;
padding: 0px;
margin: 10px;
background-color: #FFFFF5;
}
p {
margin: 0px;
padding: 10px;
clear: right;
}
/********** Large devices only **********/
@media (min-width: 992px) {
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.col-lg-1 {
width: 8.33%;
}
.col-lg-2 {
width: 16.66%;
}
.col-lg-3 {
width: 25%;
}
.col-lg-4 {
width: 33.33%;
}
.col-lg-5 {
width: 41.66%;
}
.col-lg-6 {
width: 50%;
}
.col-lg-7 {
width: 58.33%;
}
.col-lg-8 {
width: 66.66%;
}
.col-lg-9 {
width: 74.99%;
}
.col-lg-10 {
width: 83.33%;
}
.col-lg-11 {
width: 91.66%;
}
.col-lg-12 {
width: 100%;
}
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>Assignment Solution for Module 2</title>
</head>
<body>
<h1 style="text-align: center;">Our Menu</h1>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">
<h3>Div 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-lg-4">
<h3>Div 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="col-lg-4">
<h3>Div 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>我确保应用框大小：border-box以允许在元素的总宽度和高度中包含填充和边框。
编辑：应为float：左不浮动：右
1条答案
按热度按时间57hvy0tb1#
首先你需要设置卡片的宽度。对于响应性，选择
max-width。在这个例子中，我对每张卡片使用flexbox沿着max-with:400px（根据你的需要改变）。有了这几行额外的行，你的row将是响应性的。（在我的例子中，它们位于页面的中间，你可以通过justify-content来改变）。