相同宽度的Boostrap挠曲箱

Question

我有一个flex盒容器，在这个容器中，孩子们被显示在一个挠性行中。我试图使用引导，使所有的孩子都一样的宽度和高度。

<div class="d-flex flex-row flex-grow">
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-book-heart fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/KB/Forms/Procedures.aspx">Procedures</a></p>
    </div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice-dollar fa-2x color-white">​</i>
    <div>
        <p class="p-0 m-0 color-white pt-3" style="text-align: center;">
            <a href="/compass/KB/Forms/Quick%20Reference%20Guides.aspx">Quick Reference Guides</a> </p>
    </div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice fa-2x color-white"></i>
    <div class="text-center">
        <p class="p-0 m-0 color-white pt-3">
            <a href="http://helpdesk:8080/Templates.do?module=mergedRequest&amp;serviceId=3002">Stan​dardized
                Forms</a></p>
    </div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-user fa-2x color-white">​​​​​​</i>
    <div>
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/KB/Forms/Member%20Forms.aspx">Member Forms</a>​​​​​​​​​ </p>
    </div>
</div>
<div class="background-orange d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-link fa-2x color-white"></i>
    <div class="text-center">
        <p class="p-0 m-0 color-white pt-3">
            <a href="/compass/Lists/Links/AllItems.aspx">Canvas Links</a>​​​​​​​​​​​​​​​​​ </p>
    </div>
</div>
<div class="background-green d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-invoice-dollar fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3" style="text-align: center;">
            <a href="/compass/RatesFees/Forms/Rates%20and%20Fees.aspx">Deposit and Loan
                Rates</a>​​​​​​​​​​​​​​​​​ </p>
    </div>
</div>
<div class="background-blue d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-book fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3">&#160;<a href="/compass/Policies/Forms/Policies.aspx">Policies</a></p>
    </div>
</div>
<div class="background-grey d-flex flex-column flex-fill align-items-center p-4 py-4 ican-subPromos">
    <i class="fal fa-file-download fa-2x color-white"></i>
    <div>
        <p class="p-0 m-0 color-white pt-3"><a href="/compass/#ByTopicAnchor">More</a>​​</p>
    </div>
</div>

​

这是它目前的样子的图片。您可以看到，存贷款利率框比更多的方框更宽：

​

​

Answer 1

为所有儿童添加以下内容：

 flex: 1 1 0;