如何在 Bootstrap 列上放置间距？

Question

当设备屏幕尺寸大于 lg 时，我想在一行中查看所有卡片，当设备屏幕尺寸小于 lg 时，我希望它们堆叠在一起。但是我无法达到预期的结果。尽管我已将行拆分为 4:4:4，但只有 2 张卡片在一行中。当设备尺寸小于大时，卡片堆叠得很好，但卡片的宽度超出范围并且不会随着屏幕尺寸的减小而减小，即使我指定了 col-12.I 尝试使用边框装箱但它不起作用。我是 HTML 的新手，请多多指教。

body {
  background-image: linear-gradient(to right, rgb(38, 123, 252), rgb(87, 171, 226));
}

.box {
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  word-wrap: break-word;
}

.heading {
  text-align: center;
  font-size: 40px;
}

.top {
  color: grey;
  font-size: 15px;
  text-align: center;
  margin-bottom: 5px;
}

ul {
  list-style: none;
  font-size: 15px;
  text-align: left;
  padding-left: 0px;
  /* letter-spacing: .1rem; */
}

ul.cross {
  color: grey;
}

ul.tick {
  margin-bottom: 0px;
}

ul.tick li:before {
  content: '✓';
  font-size: 20px;
  font-weight: 100;
  padding-right: 5px;
}

ul.cross li:before {
  content: 'x';
  font-size: 20px;
  font-weight: 100;
  padding-right: 5px;
  color: grey;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <title>Price tag</title>
</head>

<body>
<div class="container ">
    <div class="row ">
      <div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2">
        <p class="top">FREE</p>
        <p class="text-center"><span class="heading">[=12=]</span><span>/month</span>
          <hr/>
        </p>
        <ul class="tick">
          <li>Single User</li>
          <li>5GB Storage</li>
          <li>Unlimited Public Projects</li>
          <li>Community Access</li>
        </ul>
        <ul class="cross">
          <li>Unlimited Private Projects</li>
          <li>Dedicated Phone Support</li>
          <li>Free Subdomain</li>
          <li>Monthly Status Reports</li>
        </ul>

      </div>
      <div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2 ">
        <p class="top">FREE</p>
        <p class="text-center"><span class="heading">[=12=]</span><span>/month</span>
          <hr/>
        </p>
        <ul class="tick">
          <li>Single User</li>
          <li>5GB Storage</li>
          <li>Unlimited Public Projects</li>
          <li>Community Access</li>
        </ul>
        <ul class="cross">
          <li>Unlimited Private Projects</li>
          <li>Dedicated Phone Support</li>
          <li>Free Subdomain</li>
          <li>Monthly Status Reports</li>
        </ul>
      </div>
      <div class="col-lg-4 col-12 box my-5 mx-5 mx-lg-2 ">
        <p class="top">FREE</p>
        <p class="text-center"><span class="heading">[=12=]</span><span>/month</span>
          <hr/>
        </p>
        <ul class="tick">
          <li>Single User</li>
          <li>5GB Storage</li>
          <li>Unlimited Public Projects</li>
          <li>Community Access</li>
        </ul>
        <ul class="cross">
          <li>Unlimited Private Projects</li>
          <li>Dedicated Phone Support</li>
          <li>Free Subdomain</li>
          <li>Monthly Status Reports</li>
        </ul>

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

Answer 1

在您的网格上放置一堆间距 class 是错误的，这会导致列对于行来说太大了。结构用网格，设计用间距inside。不要混淆这些担忧。 Bootstrap 已经申请 border-box.

还有，好的编辑会指出无效的HTML，比如段落里面的横线。（他们可以出去，但我在段落中用 Bootstrap 的 border-bottom class 替换了他们。）

最后，约定（和 Bootstrap 的“移动优先”哲学）规定断点 class 在标记中以最小的在前排列，以与实际 CSS 相对应级联。

body {
  background-image: linear-gradient(to right, rgb(38, 123, 252), rgb(87, 171, 226));
}

.box {
  background-color: white;
  border-radius: 10px;
  box-sizing: border-box;
  word-wrap: break-word;
}

.heading {
  text-align: center;
  font-size: 40px;
}

.top {
  color: grey;
  font-size: 15px;
  text-align: center;
  margin-bottom: 5px;
}

ul {
  list-style: none;
  font-size: 15px;
  text-align: left;
  padding-left: 0px;
  /* letter-spacing: .1rem; */
}

ul.cross {
  color: grey;
}

ul.tick {
  margin-bottom: 0px;
}

ul.tick li:before {
  content: '✓';
  font-size: 20px;
  font-weight: 100;
  padding-right: 5px;
}

ul.cross li:before {
  content: 'x';
  font-size: 20px;
  font-weight: 100;
  padding-right: 5px;
  color: grey;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
  <title>Price tag</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-12 col-lg-4">
        <div class="box my-5 mx-5 mx-lg-2 p-3">
          <p class="top">FREE</p>
          <p class="text-center border-bottom"><span class="heading">[=11=]</span><span>/month</span></p>

          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>

          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>

      <div class="col-12 col-lg-4">
        <div class="box my-5 mx-5 mx-lg-2 p-3">
          <p class="top">FREE</p>
          <p class="text-center border-bottom"><span class="heading">[=11=]</span><span>/month</span></p>

          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>

          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>

      <div class="col-12 col-lg-4">
        <div class="box my-5 mx-5 mx-lg-2 p-3">
          <p class="top">FREE</p>
          <p class="text-center border-bottom"><span class="heading">[=11=]</span><span>/month</span></p>

          <ul class="tick">
            <li>Single User</li>
            <li>5GB Storage</li>
            <li>Unlimited Public Projects</li>
            <li>Community Access</li>
          </ul>

          <ul class="cross">
            <li>Unlimited Private Projects</li>
            <li>Dedicated Phone Support</li>
            <li>Free Subdomain</li>
            <li>Monthly Status Reports</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>

如何在 Bootstrap 列上放置间距？

How can I put spacing on Bootstrap columns?

html

css

bootstrap-4