Question

我有一个项目网格，使用Bootstrap分成两列，这些列在SM和XS上折叠。我在MD和LG次观看时出现了视觉错误，其中“布线”项目在元素上方和下方都有较大的边距。

这种行为的原因是什么？

HTML：

<h2>Products &amp; Services</h2>

<p>Please see our products and services below</p>

<div class="row grid-headers">

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023376000/collateral_lan_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="#">
                <h3>Managed LAN Services</h3></a>          
            <p>
                The Managed LAN service provides a secure, reliable, flexible and inexpensive solution to network your data and IT systems within a given terminal or terminals.  You can connect end station equipment (PCs, printers, servers, workstations) directly to the LAN&#8217;s Ethernet infrastructure and [Redacted] seamlessly facilitates connectivity.              
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023391000/collateral_wlan_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="#">
                <h3>Managed Wireless Service</h3></a>
            <p>
                [Redacted] Wireless LAN coverage is provided via resilient access points to guarantee coverage even in the event of the failure of a single access point. The infrastructure is also capable of transparent roaming between access points to provide a seamless customer experience. The solution connects mobile workers at [Redacted] to back office systems simply, cost-effectively and securely, wherever they are and in real-time.               
            </p>
        </div>          
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023406000/collateral_telephony_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373024567000/collateral_telephony">
                <h3>Telephony</h3></a>          
            <p>
                [Redacted] Airport will provide a common telephony platform for customers using either a Cisco IP Phone or by providing Analogue connectivity. Phones include, standard phone, enhanced phone, expansion module, conferencing phone as well as an analogue line (includes analogue handset).
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023422000/collateral_iptv_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="#">
                <h3>IPTV</h3></a>          
            <p>     
                [Redacted] provides an extensible digital media solution delivering television service in HD (High Definition) and non-HD formats. We offer Freeview as standard and Sky channels as an option. IPTV can be delivered via [Redacted] provided screens (various sizes) or Customer provided screens.                     
            </p>
        </div>          
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023471000/collateral_cctv_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="#">
                <h3>Closed Circuit Television (CCTV)</h3></a>          
            <p> 
                CCTV is a key business tool which supports both operational and security requirements. CCTV enables multiple agencies to collaborating effectively in addressing operational and security requirements as well as supporting single commercial requirements from airlines, retailers and associated companies e.g. ground handlers.                         
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023440000/collateral_fids_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="#">
                <h3>Flight Information Display System (FIDS)</h3></a>          
            <p>             
                Flight Information Display System is available airport-wide and compatible with all existing and any new Airport Operational DataBases. This solution enables improvements in the areas of wayfinding, contributing to a better passenger travel experience.                
            </p>
        </div>          
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023456000/collateral_sis_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="#">
                <h3>Staff Information Systems</h3></a>          
            <p>         
                [Redacted]&#8217;s SIS solution enables flight data to be individually configured and made available on demand. Access to SIS is based upon an annual licence fee and can be viewed via the internet or as a PC based application. Service can be provided over the current [Redacted] airport network.                   
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023488000/collateral_cabling_icon" class="img-responsive" />
        </div>
        <div class="col-xs-10">
            <h3>Cabling</h3>
            <p>     
                If you decide not to use our managed LAN to connect your branches, we can still help by running long-distance fibre links or short distance copper links between them. Our people already have the necessary passes and know the site, so they can solve the often daunting problems of finding a physical route across the airport.                        
            </p>
        </div>          
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023349000/collateral_broadband_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="#">
                <h3>Broadband</h3></a>          
            <p> 
                The high speed access to Internet is provided at wide range of options in terms of bandwidth, resiliency, and mode of connection, ready to solve all your business needs. The short delivery times and on-site support can&#8217;t be beaten by any other offering.                           
            </p>
        </div>
    </div>

    <div class="col-md-6 col-xs-12">
        <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023265000/collateral_radio_icon" class="img-responsive" /></a>
        </div>
        <div class="col-xs-10"><a id="" name="" href="#">
                <h3>Radio</h3></a>          
            <p> 
                [Redacted] operates an MPT1327 analogue Trunk Radio system to provide push to talk voice communication across the [Redacted] campus &#8211; both inside the terminals, and on the airfield.  [Redacted] also operates Common user antenna systems within each of the terminals allowing third party operated radio service providers to provide a similar service within the airport.                           
            </p>
        </div>          
    </div>      

</div>

Answer 1

这是因为并非所有的div都是相同的高度。你的一个或多个div比另一个更高，因此需要告诉他们清除左边。

如果您不需要支持旧浏览器，可以添加：

.col-md-6:nth-of-type(2n+1){
    clear: left;
}

如果你确实需要支持旧的浏览器，你可以给每个奇数编号的div一个类并使用相同的CSS：

<div class="odd col-md-6 col-xs-12"></div>
<div class="col-md-6 col-xs-12"></div>
<div class="odd col-md-6 col-xs-12"></div>
<div class="col-md-6 col-xs-12"></div>

.odd{
    clear: left;
}

值得注意的是，您必须将其包装在正确的媒体查询中，因为这可能会影响其他Bootstrap断点处的网格。

这将使用默认的Bootstrap断点：

@media (min-width: 992px){
    .col-md-6:nth-of-type(2n+1){
        clear: left;
    }
}

以下是演示：http://www.bootply.com/weHAys32UR

Answer 2

您没有正确嵌套您的div。理想情况下，您应该在一行中保留两个div，它占据屏幕的整个宽度。正如@stuart所提到的，div的高度会产生这个问题。

您不得更改内置类的引导程序。例如，添加带有＆＃39; row＆＃39;并改变其宽度等。

<div class="grid-headers">
    <div class="row">
        <div class="col-md-6 col-xs-12">
            <div class="row"> // You need to again nest this
                <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023376000/collateral_lan_icon" class="img-responsive" /></a></div>
                <div class="col-xs-10"><a id="" name="" href="#">
                    <h3>Managed LAN Services</h3></a>          
                    <p>
                        The Managed LAN service provides a secure, reliable, flexible and inexpensive solution to network your data and IT systems within a given terminal or terminals.  You can connect end station equipment (PCs, printers, servers, workstations) directly to the LAN&#8217;s Ethernet infrastructure and [Redacted] seamlessly facilitates connectivity.              
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xs-12">
            <div class="row"> // You need to again nest this
                <div class="col-xs-2"><a id="" name="" href="#"><img id="" src="http://baadev-heathrowtelecoms.cs14.force.com/resource/1373023376000/collateral_lan_icon" class="img-responsive" /></a></div>
                <div class="col-xs-10"><a id="" name="" href="#">
                    <h3>Managed LAN Services</h3></a>          
                    <p>
                        The Managed LAN service provides a secure, reliable, flexible and inexpensive solution to network your data and IT systems within a given terminal or terminals.  You can connect end station equipment (PCs, printers, servers, workstations) directly to the LAN&#8217;s Ethernet infrastructure and [Redacted] seamlessly facilitates connectivity.              
                    </p>
                </div>
            </div>
        </div>
    </div>

    /// same as above structure

</div> // ends grid-headers

检查我的回答：http://www.bootply.com/s4HlAGQLQO 现在，它没有任何关于div的高度。

检查http://getbootstrap.com/css/#grid-nesting

Bootstrap：网格项不是内联的

2 个答案: