html - Bootstrap: Grid item not inline -
html - Bootstrap: Grid item not inline -
i have grid of items split 2 columns using bootstrap, columns collapsed on sm , xs. have visual error on md , lg views 'cabling' item has big margins above , below element.
what cause of behavior?
bootply link.
html:
<h2>products & services</h2> <p>please see our products , 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> managed lan service provides secure, reliable, flexible , inexpensive solution network info , systems within given terminal or terminals. can connect end station equipment (pcs, printers, servers, workstations) straight lan’s ethernet infrastructure , [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 provided via resilient access points guarantee coverage in event of failure of single access point. infrastructure capable of transparent roaming between access points provide seamless client experience. solution connects mobile workers @ [redacted] office systems simply, cost-effectively , securely, wherever , 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 provide mutual telephony platform customers using either cisco ip phone or providing analogue connectivity. phones include, standard phone, enhanced phone, expansion module, conferencing phone 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 extensible digital media solution delivering television service in hd (high definition) , non-hd formats. offer freeview standard , sky channels option. iptv can delivered via [redacted] provided screens (various sizes) or client 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 key business tool supports both operational , security requirements. cctv enables multiple agencies collaborating in addressing operational , security requirements supporting single commercial requirements airlines, retailers , 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 info display scheme (fids)</h3></a> <p> flight info display scheme available airport-wide , compatible existing , new airport operational databases. solution enables improvements in areas of wayfinding, contributing improve 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 info systems</h3></a> <p> [redacted]’s sis solution enables flight info individually configured , made available on demand. access sis based upon annual licence fee , can viewed via net or pc based application. service can provided on 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 decide not utilize our managed lan connect branches, can still help running long-distance fibre links or short distance copper links between them. our people have necessary passes , know site, can solve daunting problems of finding physical route across 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> high speed access net provided @ wide range of options in terms of bandwidth, resiliency, , mode of connection, ready solve business needs. short delivery times , on-site back upwards can’t beaten 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 mpt1327 analogue trunk radio scheme provide force talk voice communication across [redacted] campus – both within terminals, , on airfield. [redacted] operates mutual user antenna systems within each of terminals allowing 3rd party operated radio service providers provide similar service within airport. </p> </div> </div> </div>
it because not of divs same height. 1 or more of divs taller other , hence needs told clear left.
if don’t need back upwards older browsers add:
.col-md-6:nth-of-type(2n+1){ clear: left; } if need back upwards older browsers give every odd numbered div class , utilize same 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; } it’s worth noting you’d have wrap in right media query though potentially impact grid @ other bootstrap breakpoints.
this work default bootstrap breakpoints:
@media (min-width: 992px){ .col-md-6:nth-of-type(2n+1){ clear: left; } } here’s demo: http://www.bootply.com/wehays32ur
html css twitter-bootstrap
Comments
Post a Comment