2016-07-24 21 views
0

Ich habe Probleme mit dem Verständnis von Spalten in Bezug auf Zeilen aufgrund einer Auflistung von sagen soziale Symbole. Im Moment habe ich sie in einer Reihe in LG Ansicht Größe angezeigt und wollen sie in einer Reihe bleiben in mittleren Ansicht Größen und in kleinen und extra kleinen Ansicht Größen Ich möchte sie in 2 Reihen von 3 so 6 Spalten aufgelistet werden.Bootstrap Grid für soziale Symbole

<div class="row"> 
      <div class="col-lg-1 col-lg-offset-3 col-md-offset-6 col-md-1"> 
       <a href=""><i class="fa fa-behance-square fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-linkedin-square fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-twitter-square fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-skype fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-facebook-square fa-icon"></i></a> 
      </div> 
      <div class="col-lg-1 col-md-1"> 
       <a href=""><i class="fa fa-github-square fa-icon"></i></a> 
      </div> 
     </div> 

Antwort

1

die Sie interessieren,

<div class="row"> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-behance-square fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-linkedin-square fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-twitter-square fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-skype fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-facebook-square fa-icon"></i></a> 
    </div> 
    <div class="col-xs-4 col-sm-2"> 
     <a href=""><i class="fa fa-github-square fa-icon"></i></a> 
    </div> 
</div> 

für mobile Geräte (col-xs- *), die jeweils div Breite wäre um 33,33% (100/3). So wird es in zwei Reihen von 6 Spalten sein. Für andere als mobile Geräte (dh von kleinen bis zu großen Geräten) wäre jedes div 16,66% (100/6).

Werfen Sie einen Blick auf diese Demo, http://jsbin.com/riwiva/edit?html,output

Dank!