xs屏幕中的Bootstrap网格系统2项

时间:2017-02-28 19:27:59

标签: html twitter-bootstrap grid-system

我有以下网格系统,他们有3行,每行大屏幕有3个项目,我想编辑代码,使它们在xs屏幕的每一列中变成2个项目但是它们错过了,我怎么能这样做?



<div class="row text-center">
                        <div class="col-lg-4 col-xs-4"> <img src="service1.jpg" style="height:100px">
                            <h5>Desktop & Mobile Website Design</h5>
                            <p>We offer a full website planning, workshop and design service for all industry sectors. We are also experts at creating websites for mobile phones and tablet devices.</p>
                        </div>
                        <div class="col-lg-4 col-xs-4"> <img src="web-cms.jpg" style="height:100px">
                            <h5>Website & Content Management</h5>
                            <p>All websites need intelligence, and we have many years experience blending design and content management systems to help bring your website to life.</p>
                        </div>
                        <div class="col-lg-4 col-xs-4"> <img src="graphic-design.jpg" style="height:100px">
                            <h5>Creative Branding & Graphic Design</h5>
                            <p>Effective branding and engaging graphic design is the first thing your clients notice. Make sure you stand out from the crowd with some high impact visuals.</p>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-lg-4 col-xs-4"> <img src="programming.jpg" style="height:100px">
                            <h5>Web Applications & Programming</h5>
                            <p>We are experience at integrating technical applications and web systems. Make sure your business is supported correctly and your operations work together seamlessly.</p>
                        </div>
                        <div class="col-lg-4 col-xs-4"> <img src="ecommerce.jpg" style="height:100px">
                            <h5>e-Commerce & Payment Solutions</h5>
                            <p>We can help you trade online with full e-commerce solutions comprising hundreds of products or maybe a simple payment gateway to accept customers transactions.</p>
                        </div>
                        <div class="col-lg-4 col-xs-4"> <img src="domains.jpg" style="height:100px">
                            <h5>Domain Names & Website Hosting</h5>
                            <p>Professional websites require a solid platform. We manage hundreds of domain names and also run Dedicated and Cloud based hosting solutions for our clients.</p>
                        </div>
                    </div>
                    <div class="row text-center">
                        <div class="col-lg-4 col-xs-4"> <img src="enewsletters.jpg" style="height:100px">
                            <h5>e-Newsletters & Broadcasting</h5>
                            <p>We have years of experience helping customers market their business to interested people. We can help you design, build and broadcast your email campaigns.</p>
                        </div>
                        <div class="col-lg-4 col-xs-4"> <img src="marketing.jpg" style="height:100px">
                            <h5>Social Media & Marketing</h5>
                            <p>Social media is part of everyday life and having an overall strategy is crucial for the success of your online business. We can help you get the most from your activity.</p>
                        </div>
                        <div class="col-lg-4 col-xs-4"> <img src="content.jpg" style="height:100px">
                            <h5>Content Creation & Production</h5>
                            <p>We can work with you to help you with your copywriting, photography and video production in case you can’t create these assets yourself.</p>
                        </div>
                    </div>
                </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

如果您需要lg上的3个项目和xs上的2个项目,则必须使用列包装响应式重置 col-的所有应该在一个.row中...

<div class="row">
     <div class="col-lg-4 col-xs-6"> 1 </div> 
     <div class="col-lg-4 col-xs-6"> 2 </div> 
      <!-- clearfix xs cols every 2 -->
      <div class="clearfix visible-xs"></div> 
     <div class="col-lg-4 col-xs-6"> 3 </div> 
      <!-- clearfix lg cols every 3 -->
      <div class="clearfix visible-lg"></div> 
     <div class="col-lg-4 col-xs-6"> 4 </div> 
       <div class="clearfix visible-xs"></div> 
     <div class="col-lg-4 col-xs-6"> 5 </div> 
     <div class="col-lg-4 col-xs-6"> 6 </div>
       <div class="clearfix visible-xs visible-lg"></div>  
     <div class="col-lg-4 col-xs-6"> 7 </div> 
     <div class="col-lg-4 col-xs-6"> 8 </div>
       <div class="clearfix visible-xs"></div>  
     <div class="col-lg-4 col-xs-6"> 9 </div> 
     ...
</div>