引導網格系統2項在xs屏幕

我有以下網格系統，他們是3行，並在每一行有3個項目在大屏幕上，我想編輯代碼，以便他們成爲2項目每個列在XS屏幕上，但他們成爲錯過了，我該怎麼做？引導網格系統2項在xs屏幕

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

來源

2017-02-28 jissylarry

你試圖改變' 'COL-XS-4''到'' COL-XS-6''？ –

@john_h我做了，但他們沒有按我想要的方式出現，每行都出現一個空白，我不知道爲什麼 – jissylarry

好的。 Bootstrap類將具有固有的屬性，例如'padding，margin等'。當它是XS屏幕時，你不想在div之間進行間隔？你可以在你自己的CSS中刪除填充：'col-xs-6：margin：0;填充：0;'這是否更接近你正在尋找？此外，行將具有從子元素繼承的屬性。 –

如果要在上lg 3項和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-28 20:03:32 ZimSystem

引導網格系統2項在xs屏幕

回答

相關問題