引导列类不遵循边距或容器流体类答案

【问题标题】：Bootstrap column class not following margins or container fluid class引导列类不遵循边距或容器流体类
【发布时间】：2021-03-26 19:11:42
【问题描述】：

我正在使用卡片在网站上显示信息。我希望卡片彼此并排。我听说这样做的方法是将每张卡片放在一个列中。

当我这样做时，我想要的 2 张卡片的所有间距都消失了。第一张牌在屏幕左侧没有间距，第二张牌在第一张牌的右边。我的 container-fluid div 中的其他元素通常有一点边距，但列没有。

代码：

<div class="row">
   <div class="card mb-3" style="width: 22rem;">
        <ul class="list-group list-group-flush">
            <li class="list-group-item">Name: User</li>
            <li class="list-group-item">Email: User@email.com</li>
            <li class="list-group-item">
                <label for="exampleInputPassword1" class="form-label">Password: </label>
                <input id="exampleInputPassword1" type="password" disabled value="{{session['password']}}" style="width: 10rem">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"  fill="currentColor" class="bi bi-eye-fill"
                     viewBox="0 0 16 16" style="margin-top:-5px; margin-left: 5px" id="iconUnselected"
                     onmousedown="document.getElementById('iconUnselected').classList.add('d-none');
                              document.getElementById('iconSelected').classList.remove('d-none')
                              document.getElementById('exampleInputPassword1').setAttribute('type', 'text')">
                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/>
                    <path fill-rule="evenodd" d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/>
                </svg>
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-eye d-none"
                     viewBox="0 0 16 16" id="iconSelected" style="margin-top:-5px; margin-left: 5px"
                     onmouseup="document.getElementById('iconSelected').classList.add('d-none');
                              document.getElementById('iconUnselected').classList.remove('d-none')
                              document.getElementById('exampleInputPassword1').setAttribute('type', 'password')">
                    <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z"/>
                    <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                </svg>
            </li>
            <li class="list-group-item">Status: Standard</li>
            <li class="list-group-item">
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#editInfo">Edit Info</button>
                <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteAccount">Delete Account</button>
            </li>
        </ul>
    </div>
    <div class="card mb-3 col-100" style="width: 18rem;">
      <div class="card-body">
        <h5 class="card-title">About</h5>
        <p class="card-text">Sample About Text</p>
      </div>
    </div>
</div>

有谁知道如何解决这个问题或更好地找到一种更有效的方法让两张卡彼此相邻？谢谢

在这张图片中看到，边距不一样（红色箭头所示）。下面，我有一张卡片遵守容器流体给出的适当边距，但 div 中的上述卡片没有也没有边距。我需要准确地说。不要给卡片添加边距，因为放大时仍然存在一些差异。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

在container-fluid之后添加row类

<div class="container-fluid">
  <div class="row">
    <div class="card mb-3" style="width: 22rem;">
           <div class="card-body">
              <h5 class="card-title">1st card</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
         </div>
       <div class="card mb-3 col-100" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">2nd card</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
  </div>
</div>

https://jsfiddle.net/lalji1051/49u10jLo/1/

【讨论】：

哦，抱歉——忘记复制了。
另外代码仍然给出相同的结果，卡片被打包在一起。我会编辑它的一个片段。

【解决方案2】：

我的代码如下。它奏效了。

<div class="container-fluid">
    <div class='row'>
        <div class="card mb-3 mx-3" style="width: 22rem;">
            <div class="card-body">
                <h5 class="card-title">1st card</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
        <div class="card mb-3" style="width: 18rem;">
            <div class="card-body">
                <h5 class="card-title">2nd card</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
</div>

【讨论】：

我试图为第一张卡片增加保证金。有效。我很抱歉我的英语不好。
一开始看起来不错，但如果你放大一堆，边距会被关闭。我将在参考卡中包含更多代码。

【解决方案3】：

我在其中添加了flexbox 类，以便根据需要添加卡片之间的动态间距。根据您的要求，您可以包括三种类型的间距：-

Space-around(justify-content-around)：这将在卡片周围留下相等的间距。
Space-between(justify-content-between)：这将在卡片之间留出所有空间。
Space-evenly(justify-content-evenly)：这将在所有卡片之间留下相等的空间。 我的建议

注意：左右间距可以通过添加类（mx-2）来添加边距，这是可选的。

代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="d-flex justify-content-evenly">
    <div class="card">
           <div class="card-body">
              <h5 class="card-title">1st card</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
         </div>
       <div class="card">
        <div class="card-body">
          <h5 class="card-title">2nd card</h5>
          <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
  </div>
</div>

【讨论】：

这并不是我真正想要的，因为现在每件事都刚刚居中。我会放一张我真正需要的照片。
@JamesHuang，我仍在等待图像以了解您真正想要什么。您评论中的图片仍然没有提供足够的信息。
在图片中，有一个红色箭头表示在一行中的 div 和不在行中的另一个 div 之间的空间是不同的。这是因为该行中的 div 不遵循容器流体边距。在您的代码中，行 div 居中，这不是我想要的。我希望 div 与屏幕左侧的相同边距对齐。
@JamesHuang，请看一下我已经删除了该行以删除该类应用的任何边距。现在它将具有应用于父 div 的边距
看起来它可以工作，但如果我缩短一些文本，它会回到居中。我想我将不得不包含更多我自己的代码，因为其他事情正在影响这一点。

【解决方案4】：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <link rel="stylesheet" type="text/css" href="bootstrap.css">
        <title>
        </title>
    </head>
    <body>
        <div class="container-fluid">
            <div class='row'>
                <div class="card mb-3 ml-3 mr-1" style="width: 22rem;">
                    <div class="card-body">
                        <h5 class="card-title">1st card</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
                <div class="card mb-3 ml-3" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">2nd card</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

【讨论】：

我让第二张卡也有边距。我很抱歉我的英语不好。
也许您应该在代码中为您显示的图像中包含图像，这样我就不必一直更改标签就可以看到它。您也可以像其他一些答案一样将代码作为 sn-p。
第一个代码是这样的。
用于第一张卡片。第二个答案是这样的。
用于第一张卡片，
用于第二张卡片。我很抱歉我的英语不好。
我看到了，但它并没有真正改变我机器上的任何东西。尝试自己运行代码并共享一个 sn-p 或使代码成为一个代码 sn-p。
我给你发了整个 html 代码。它可以在我的设备上正常运行。