Question

我正在尝试在Bootstrap中正确堆叠项目。我正在使用容器和行进行堆叠。在某个断点之后，项目不再正确对齐。我想解决此问题，并检查了所有有关卡片和文本的StackOverflow问题，但找不到任何类似的问题

以下是在990px断点之前可以使用的几乎正确的设计（我需要在此处添加一些负填充，以便0.x在撤消项下对齐）：

在此断点之后，您将获得：

即使有足够的空间，移动版本也是完全错误的：

我的代码在react / nextjs中，所以如果您不熟悉className，请忽略它

<div className="container">
      <div className="card-deck">
        {/*     CARD START */}
        <div className="card mb-4">
          <img
            className="card-img-top img-fluid"
            src="//placehold.it/500x280"
            alt="Card image cap"
          />
          <div className="card-body">
            <h4 className="card-title">Test information</h4>
            <div className="fee-stats">
              <div className="container">
                <div className="row">
                  <div className="col-sm">
                    <p className="card-text">
                      TAKER
                      <br />
                      0.05%
                    </p>
                  </div>
                  <div className="col-sm">
                    <p className="card-text">
                      MAKER <br /> 0.05%
                    </p>
                  </div>
                  <div className="col-sm">
                    <p className="card-text">
                      WITHDRAWL
                      <br /> 0.0005
                      <span className="bitcoin-icon">&#8383;</span>{" "}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="card-footer border-0 rounded-bottom">
            <small className="text-muted">Intermediate</small>
          </div>
        </div>

CSS：

.card-style {
          margin: auto;
          width: 80%;
          padding: 10px;
        }
        .card-img-top {
          margin: auto;
          width: 30%;
          padding-top: 20px;
        }
        .card-title {
          text-align: center;
        }
        .card-footer {
          background-color: #9effaf;
        }
        .rounded {
          border-radius: 0.6rem !important;
        }
        .rounded-bottom {
          border-bottom-left-radius: 0.6rem !important;
          border-bottom-right-radius: 0.6rem !important;
        }
        .card-text {
          text-align: center;
          font-size: 65%;
        }

Answer 1

不确定我是否完全了解您的问题/需求，但是通过在每个断点处指定列的宽度，您一定会实现所需的功能。您可以通过指定width = 12 /＃个元素来强制内容保持内联。然后使用width = 12强制堆叠。...

<div class="card-deck">

<div class="card mb-4">
    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap" />
    <div class="card-body">
        <h4 class="card-title">Test information</h4>
        <div class="fee-stats">
            <div class="container">
                <div class="row">
                    <div class="col-4  px-1">
                        <p class="card-text"> TAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> MAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> WITHDRAWL <br /> 0.0005 <span className="bitcoin-icon">&#8383;</span>{" "} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer border-0 rounded-bottom">
        <small class="text-muted">Intermediate</small>
    </div>
</div>
 <div class="card mb-4">
    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap" />
    <div class="card-body">
        <h4 class="card-title">Test information</h4>
        <div class="fee-stats">
            <div class="container">
                <div class="row">
                    <div class="col-4  px-1">
                        <p class="card-text"> TAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> MAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> WITHDRAWL <br /> 0.0005 <span className="bitcoin-icon">&#8383;</span>{" "} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer border-0 rounded-bottom">
        <small class="text-muted">Intermediate</small>
    </div>
</div>
 <div class="card mb-4">
    <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap" />
    <div class="card-body">
        <h4 class="card-title">Test information</h4>
        <div class="fee-stats">
            <div class="container">
                <div class="row">
                    <div class="col-4  px-1">
                        <p class="card-text"> TAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> MAKER <br /> 0.05% </p>
                    </div>
                    <div class="col-4  px-1">
                        <p class="card-text"> WITHDRAWL <br /> 0.0005 <span className="bitcoin-icon">&#8383;</span>{" "} </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="card-footer border-0 rounded-bottom">
        <small class="text-muted">Intermediate</small>
    </div>
</div>

edit ：指向引导网格系统here的链接。这里col-6表示默认为6号（超过12）。而且col-md-4表示，只要屏幕比中型大，它的大小就为4。

edit2 ：有效的示例codereply

Answer 2

在您的容器上输入书写文字。您无需指定编号。如果要将此行分为3列，则应添加col-sm-4。

如果要在所有设备上使用3列，请使用col-3

Working example

 <div class="row">
              <div class="col-3">
                <p class="card-text">
                  TAKER
                  <br />
                  0.05%
                </p>
              </div>
              <div class="col-3">
                <p class="card-text">
                  MAKER <br /> 0.05%
                </p>
              </div>
              <div class="col-3">
                <p class="card-text">
                  WITHDRAWL
                  <br /> 0.0005
                  <span class="bitcoin-icon">&#8383;</span>{" "}
                </p>
              </div>
            </div>

引导卡响应文本正确堆叠

2 个答案: