0

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

4

1 回答 1

1

如果您想要 3 个项目lg和 2 个项目，则xs必须使用列换行和响应式重置。所有的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>
于 2017-02-28T20:03:32.737 回答