html - 引导两列布局，如 Pintrest

Question

我在尝试将容器推入我的两列布局时遇到问题。现在它对齐，这意味着如果容器恰好比其他容器长，则容器之间存在间隙。这是希望进一步解释它的图片

下面是这部分的代码：

<section class="maincontent container container-fluid">
<!-- BOX 1 -->
<article class="servicestatus container container-fluid col-xs-12 col-md-6 float-md-left">
    <a id="aservicestatus"></a>
    <div class="container">
    <span class="sprite icon"></span>
        <h3>Service Status Notifications</h3>
        <j:while test="${ou.next()}">
        <j:if test="${ou.type!='planned'}">
            <div class="statusitem">
            <j:if test="${ou.type=='outage'}">
            <span class="status red">Outage</span>
            </j:if>
            <j:if test="${ou.type=='degradation'}">
            <span class="status yellow">Degradation</span>
            </j:if>
            <j:if test="${ou.type=='informational'}">
            <span class="status green">Informational</span>
            </j:if>
            <h5>${ou.short_description}</h5>
            <p class="subheader"><strong>Start Date</strong> <em>- ${ou.begin.getDisplayValue()}</em></p>
            <p class="subheader">${ou.u_outage_details}</p>
        </div>
        </j:if> 
        </j:while>
    </div>
</article>
<!-- BOX 2 -->
<article class="plannedoutages container container-fluid col-xs-12 col-md-6 float-md-right">
    <a id="aplannedoutages"></a>
    <div class="container">
        <span class="sprite icon"></span>
        <h3>Scheduled Maintenance</h3>
        <j:while test="${mn.next()}">
            <j:if test="${mn.type=='planned'}">
                <div class="outageitem">
                    <p class="subheader"><strong>${mn.cmdb_ci.name}</strong></p>
                    <p class="subheader">From: <em>${mn.begin.getDisplayValue()} - ${mn.end.getDisplayValue()} </em> </p>
                    <p class="subheader">${mn.u_outage_details}</p>
                </div>
            </j:if>
        </j:while>
    </div>
</article>
<article class="wifi container container-fluid col-xs-12 col-md-6 pull-md-right">
    <a id="awifi"></a>
    <div class="container">
        <span class="sprite icon"></span>
        <h3>Wifi Information</h3>         
<div class="container">
    <j:if test="${bt.next() || bt.getRowCount() > 0}">

        <j:if test="${bt.u_omers_company=='oxford'}">
            <p class="subheader">Please follow these <a href=" http://wa.oxfordproperties.com/CS/REMLearning/5162575" target="_blank">Instructions</a></p>
        </j:if>

        <j:if test="${bt.u_omers_company!='oxford'}">
            <p class="subheader">Please follow these <a href="https://omers.sharepoint.com/sites/Offices/Documents/Toronto/Technology/How%20to%20Setup%20Guest%20WiFi.pdf" target="_blank">Instructions</a></p>
        </j:if>

    </j:if>

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

<!-- BOX 3 -->
<article class="windows10 container container-fluid col-xs-12 col-md-6 pull-md-right">
    <a id="awindows10"></a>
    <div class="container">
        <!--<span class="sprite icon"></span>  -->
        <img src="win10icon.png" width="62" height="63"/>
        <h3>Exchange/Win 10 Information</h3>
        <div class="container">
            <p class="subheader">IT Team is pleased to announce the deployment of Windows 10 with Office Professional Plus and Outlook Exchange Online (part of the Microsoft Office 365 platform). You can get regular updates <a href="http://oxport.oxfordproperties.com/oxport/announce/Win10Exch.html" target="_blank">here</a>.</p>
            <p></p>
            <!--<p class="subheader">For those who would like to preview it prior to receiving the Windows 10 upgrade, please click <a href="http://oxport.oxfordproperties.com/oxport/announce/Win10Exch-video.html" target="_blank">here</a>.</p> -->


            <p class="subheader">We are pleased to inform you that your Office suite has been updated to a new version (1808).</p>
            <p class="subheader">This will enable new collaboration features like <B>Document collaboration and co-authoring, AutoSave for Teams and OneDrive files, Improved cell and formula bar editing</B>, etc.</p>
            <p></p>

            <p class="subheader">To ensure your upgrade is complete:</p>
            <p class="subheader">1.  <B>Close</B> all open Microsoft apps. </p>
            <p class="subheader">2.  <B>  Relaunch</B> any Microsoft Office desktop app (e.g. Word, PowerPoint, Excel, Outlook) </p>
            <p class="subheader">3.  <B>  Check</B> that you have the right version. Go to <B>File > Account</B>, and look under Product Information for <B>"Version 1808"</B> </p>
            <p></p>
            <p class="subheader">Please see full release notes <a href="https://docs.microsoft.com/en-us/officeupdates/semi-annual-channel-2019#version-1808-january-8" target="_blank">here</a>.</p>
        </div>
    </div>
</article>

<!-- BOX 4 -->
<article class="hoursofoperation container container-fluid col-xs-12 col-md-6 float-md-right">
    <a id="ahoursofoperation"></a>
    <div class="container">
        <span class="sprite icon"></span>
        <h3>Hours of Operation</h3>
        <j:if test="${be.next()}">
        <j:if test="${be.u_omers_company=='oxford'}">
        <p class="subheader"><B>Regular Operating Hours: </B> <em>Monday to Friday – 8AM to 8PM ET</em></p>
        <p class="subheader"><B>After-Hours Emergency Support: </B> <em>Monday to Friday – 8PM to 11PM ET Saturday to Sunday – 10AM to 7PM ET</em></p>
        <p class="subheader"><B>Telephone: </B> <em>416-865-8349</em></p>
        <p class="subheader"><B>Email:</B> <a href="mailto:[e-mail]">Service Desk</a></p>
            </j:if>
        <j:if test="${be.u_omers_company=='omers'}">
        <p class="subheader"><B>Regular Operating Hours: </B> <em>Monday – Friday 7am to 7pm ET</em></p>
            <p class="subheader"><B>24/7 on call support: </B> <em>available outside of business hours (by phone only). For urgent issues requiring immediate attention, please call the Service Desk instead of emailing. Depending on volumes being handled by the team, it may take up to 24 business hours for the Service Desk to respond to emails. Outside of normal business hours, the Service Desk phone line is automatically redirected to 24/7 on call support.</em></p>
        <p class="subheader"><B>Telephone: </B> <em>416-814-6555, option 1 </em></p>
        <p class="subheader"><B>Email:</B> <a href="mailto:[e-mail]">Service Desk</a></p>
            </j:if>
        </j:if> 

    </div>
</article>
<!-- BOX 5 -->
<article class="ITsupport container container-fluid col-xs-12 col-md-6">
    <a id="ITsupport"></a>

    <div class="container">

        <img src="/Facility_logoMobile.png"  height="45px"/>

        <h3>Facilities Portal</h3>


        <p class="content"> From here you can submit a request relating to new office furniture, security cards, confidential shredding services or to request an ergonomic consultation.</p>
        <a href="/facilities/" class="itBtn" target="_parent">Go > </a>
    </div>
    </article>
</section>

标签： htmlcssbootstrap-4