嗨，我有两个小问题
- 我的col类超过了容器区域=https://i.stack.imgur.com/bvEAv.jpg
- 我还需要两个div之间的空间=https://i.stack.imgur.com/KWFAB.jpg
如果我添加下面的代码，可以工作，但当我们减少浏览器大小时，打破div并将div放在另一个下面=https://i.stack.imgur.com/knflM.jpg
.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-12 {
width: 48%;
margin-left: 20px;
}
这个想法是用这样的空格将div放在一起=https://i.stack.imgur.com/gMlqC.jpg
此外，我注意到，当我包括div之间的空间时，当达到992px以下以将div移动到彼此下方时，会破坏响应性=https://i.stack.imgur.com/Y049G.jpg
我现在对响应能力很满意，只要我在div之间留出空间，就可以打破所有的响应能力，有人能帮我解决这个问题吗？
jsfiddle=https://jsfiddle.net/vkb1aLeo/
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" />
</head>
<style>
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-12 {
border: 1px solid #030303;
padding: 20px;
margin-top: 10px;
}
.item-name {
float: left;
width: 50%;
font-weight: 600;
}
.item-price {
float: right;
width: 50%;
font-weight: 600;
text-align: right;
}
.item-desc {
float: left;
color: #0d6583;
width: 58%;
}
.item-image {
float: right;
/* width: 40%; */
}
h4 {
padding: 10px;
font-size: 32px;
background: #945002;
color: white;
margin: 10px 0 10px 0;
}
</style>
<body>
<div class=" container">
<h1>Test:</h1>
<div class=" row">
<div class="">
<h4>Test</h4>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="item-name">
<p>Salad</p>
</div>
<div class="item-price">
<span ><span ><p>€1.00</p></span></span>
</div>
<div class="item-desc">
<p>Packed with super foods</p>
</div>
<div class="item-image">
<img src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="Salad" />
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="item-name">
<p>Soup</p>
</div>
<div class="item-price">
<span ><span ><p>€1.0a0</p></span></span>
</div>
<div class="item-desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet.
</p>
</div>
<div class=" item-image">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="Soup" />
</div>
</div>
</div>
</div>
</body>
</html>您不必覆盖col-sm类。相反，试试这样的东西。请注意名为border_div:的新类
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity=" sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" />
</head>
<style>
.border_div {
border: 1px solid #030303;
padding: 20px;
margin-top: 10px;
display: block;
float: left;
}
.item-name {
float: left;
width: 50%;
font-weight: 600;
}
.item-price {
float: right;
width: 50%;
font-weight: 600;
text-align: right;
}
.item-desc {
float: left;
color: #0d6583;
width: 58%;
}
.item-image {
float: right;
/* width: 40%; */
}
h4 {
padding: 10px;
font-size: 32px;
background: #945002;
color: white;
margin: 10px 0 10px 0;
}
</style>
<body>
<div class=" container">
<h1>Test:</h1>
<div class=" row">
<div class="">
<h4>Test</h4>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border_div">
<div class="item-name">
<p>Salad</p>
</div>
<div class="item-price">
<span ><span ><p>€1.00</p></span></span>
</div>
<div class="item-desc">
<p>Packed with super foods</p>
</div>
<div class="item-image">
<img src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="Salad" />
</div>
</div>
</div>
<div class="menu-item col-12 col-sm-12 col-lg-6">
<div class="border_div">
<div class="item-name">
<p>Soup</p>
</div>
<div class="item-price">
<span ><span ><p>€1.0a0</p></span></span>
</div>
<div class="item-desc">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet.
</p>
</div>
<div class=" item-image">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="Soup" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
您可以通过设置来控制行和列之间的间隙
--bs-gutter-x: 2rem; /* control column gap */
不管怎样，您假设将.menu项类移动到.menu-*项的新包装器中，请参阅代码段。它还将使您的代码采用更多BS网格方式。
.menu-row {
--bs-gutter-x: 2rem !important; /* control column gap */
--bs-gutter-y: 2rem !important; /* control row gap */
}
.menu-item {
display: inline-block;
width: 100%;
height: 100%;
border: 1px solid #030303;
padding: 20px;
}
.item-name {
float: left;
width: 50%;
font-weight: 600;
}
.item-price {
float: right;
width: 50%;
font-weight: 600;
text-align: right;
}
.item-desc {
float: left;
color: #0d6583;
width: 58%;
}
.item-image {
float: right;
/* width: 40%; */
}
h4 {
padding: 10px;
font-size: 32px;
background: #945002;
color: white;
margin: 10px 0 10px 0;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<link href="style.css" rel="stylesheet" />
<div class="container">
<h1>Test:</h1>
<div class="row menu-row">
<div class="col-12">
<h4>Test</h4>
</div>
<div class="col-12 col-lg-6">
<div class="menu-item">
<div class="item-name">
<p>Salad</p>
</div>
<div class="item-price">
<span><span ><p>€1.00</p></span></span>
</div>
<div class="item-desc">
<p>Packed with super foods</p>
</div>
<div class="item-image">
<img src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="Salad" />
</div>
</div>
</div>
<div class="col-12 col-lg-6">
<div class="menu-item">
<div class="item-name">
<p>Soup</p>
</div>
<div class="item-price">
<span><span ><p>€1.0a0</p></span></span>
</div>
<div class="item-desc">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non vehicula tellus, quis lobortis augue. Vivamus fermentum maximus sapien sit amet semper. Vivamus in nunc id magna consectetur laoreet.
</p>
</div>
<div class=" item-image">
<img itemprop="image" src="https://i.imgur.com/ZIsnpPF.jpg?auto=format&w=120&h=120" alt="Soup" />
</div>
</div>
</div>
</div>
</div>