使用卡片 BootStrap4 将 flex 扩展到全宽答案

【问题标题】：expanding flex to full width with cards BootStrap4使用卡片 BootStrap4 将 flex 扩展到全宽
【发布时间】：2021-03-06 05:18:50
【问题描述】：

我正在使用 flex 来包含使用引导程序的卡片，但卡片未显示为屏幕的整个宽度。它们堆叠在屏幕的左半边。

HTML 文件是这样的：

<section class="projects" id="projects">
            <div class="services-cards">
                <div class="card" style="width: 14rem;">
                    <img class="card-img-top" src="images/undraw_develop_app_re_bi4i.svg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</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>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card" style="width: 14rem;">
                    <img class="card-img-top" src="images/undraw_for_review_eqxk.svg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</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>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card" style="width: 14rem;">
                    <img class="card-img-top" src="images/undraw_Success_factors_re_ce93.svg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title">Card title</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>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>

            </div>

        </section>

css 是这样的

.card{
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
     padding:10px;
  }
  .services-cards{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-left:30px;
    margin-bottom: 90px;
    justify-items:auto;
  }

我做错了什么？我希望弯曲的内容（在这种情况下为卡片）将是屏幕的全宽。

现在是这样的

enter image description here

【问题讨论】：

你想让.card全屏吗？
.service-cards 为全屏宽度如您所见，我在服务卡中有 3 张卡。我希望将这 3 张卡片均匀地分布在屏幕的宽度上。现在，它们在屏幕的左半边彼此相邻。
根据需要添加.services-cards:{justify-content:space-around}或justify-content:space-between

标签： html css bootstrap-4

【解决方案1】：

只需在.service-cards 上使用.justify-content-between 或.justify-content-around。 Between 会将第一个和最后一个放在最远的边缘，并在它们之间均匀分布项目，而 around 将使外部和之间的所有空间相等。

<section class="projects" id="projects">
  <div class="services-cards justify-content-between">

    {card} {equal-space} {card} {equal-space} {card}

  </div>
</section>

或者

<section class="projects" id="projects">
  <div class="services-cards justify-content-around">
    
    {equal-space} {card} {equal-space} {card} {equal-space} {card} {equal-space}

  </div>
</section>

【讨论】：