TwitterBoostrapcol超出容器區域-有解無憂

嗨，我有 2 個小問題

我的 col 類超出了容器區域 = https://i.imgur.com/Ee1VlqL.jpg
我也需要兩個 div 之間的空格 = 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 彼此并排，這樣的空間 = https://i.imgur.com/QTkPe5U.jpg

另外，我注意到當我在 992px 以下將 div 移動到彼此下方時，包含 div 之間的空間會破壞回應性 = https://i.imgur.com/E7cW1th.jpg

如果我在 div 之間放置空間會破壞所有回應能力，我現在對回應能力感到非常滿意，有人可以幫我解決這個問題嗎？

jsfiddle= https://jsfiddle.net/vkb1aLeo/

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

您不必重寫 col-sm 類。相反，嘗試這樣的事情。注意名為border_div的新類：

<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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>

uj5u.com熱心網友回復：

您可以通過設定控制行列之間的間隙

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

無論如何，您應該將.menu-item類移動到.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/[email protected]/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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/429610.html

標籤：html css 推特引导引导程序 5

上一篇：如何使用Bootstrap添加這兩行？

下一篇：如何在保持影片淡入激活的同時禁用Boostrap5Modal的淡出？