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

Question

我有以下网格系统，它们有 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>

Answer 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>

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

Bootstrap grid-system 2 items in xs screen

html

grid-system

twitter-bootstrap