尝试水平添加引导卡时水平对齐变得混乱答案

【问题标题】：Horizontal alignments getting messed when trying to add bootstrap cards horizontally尝试水平添加引导卡时水平对齐变得混乱
【发布时间】：2021-02-23 02:42:46
【问题描述】：

当我尝试连续堆叠 2 张引导卡时，我的水平对齐变得混乱。问题是我在尝试添加这些卡片的那一刻启用了水平滚动条。谁能给我建议一个解决方案

根据引导文档改编的代码如下

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

您能否添加您的问题的屏幕截图，如果可能的话，修改问题，以便清楚地理解问题
@PrathameshKoshti 感谢您的友好回复。它现在已被收录
我在 codepen 中尝试了你的代码：codepen.io/prathameshkoshti/pen/gOMQzox?editors=1010，它看起来不错，你能发布整个代码吗，就像在当前的一样，我看不到标题“查看下面的最新交易"。

标签： html css bootstrap-4

【解决方案1】：

我最好的猜测是，来自 Bootstrap 的官方文档，

卡片开始时没有特定宽度，因此它们的宽度为 100% 除非另有说明。

要解决水平滚动问题，您可以将容器类添加到行中

<div class="row row-container">   <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>   </div>   <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>   </div> </div>

并添加以下样式

.row-container{
  width:100%;
  overflow-x:hidden;
}

或者给你的行一个左右自动边距

.row-container{
  margin: 0px auto;
}

你可以在这里看到笔。 https://codepen.io/fuzzysid/pen/vYKQjWy

【讨论】：