Twitter Bootstrap col 超出容器区域

Question

嗨，我有两个小问题

我的 col class 超出容器区域 = https://i.imgur.com/Ee1VlqL.jpg
我还需要一个 space 在 2 divs = https://i.imgur.com/05MqQkV.jpg

如果我添加下面的代码有效，但在我们减小浏览器大小时打破 div 并将 div 放在另一个下面= https://i.imgur.com/TFqWBF2.jpg

.col-sm-2, .col-sm-3, .col-sm-4, .col-sm-12 {
    width: 48%;
    margin-left: 20px;
}

想法是让 div 和 space 像这样 = https://i.imgur.com/QTkPe5U.jpg

另外，我注意到当我在 div 之间包含 space 时，在将 div 移动到彼此下方时打破了 992px 的响应能力 = https://i.imgur.com/E7cW1th.jpg

如果我将 space 放在 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&amp;w=120&amp;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&amp;w=120&amp;h=120" alt="Soup" />
                    </div>
                </div>
            </div>
        </div>
   
</body>

</html>

Answer 1

您不必覆盖 col-sm class。相反，尝试这样的事情。注意新的class叫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&amp;w=120&amp;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&amp;w=120&amp;h=120" alt="Soup" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
   
</body>

</html>

Answer 2

您可以通过设置

来控制行列之间的间距

--bs-gutter-x: 2rem; /* control column gap */

无论如何，你应该将 .menu-item class 移动到 .menu-* 的新包装器项目，请参阅代码片段。它还将使您的代码更 BS-grid-way.

.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&amp;w=120&amp;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&amp;w=120&amp;h=120" alt="Soup" />
        </div>
      </div>

    </div>
  </div>
</div>

Twitter Bootstrap col 超出容器区域

Twitter Boostrap col exceeding container area

html

css

twitter-bootstrap

bootstrap-5