2014-01-14 57 views
0

我試圖重新對齊引導程序中的列,但目前爲止失敗。這是它在桌面視圖中顯示的很好的desktop view。以下是它在縮小尺寸tablet view時的樣子。我希望所有者網關列與已登錄列交換位置。引導程序中的列重新對齊3

HTML:

<div class="col-xs-4 col-sm-4 col-lg-3" id="logo"> 
    <img src="http://f.cl.ly/items/2B2c3t3d0N0r1F0F1m05/logo-white.png" class="img-responsive"> 
    </div> 
    <div class="col-xs-8 col-sm-4 col-lg-6" id="main-title"> 
    <h1 class="title">Owner Gateway</h1> 
    </div> 
    <div class="col-xs-4 col-sm-4 col-lg-3 " id="logged-in"> 
    <p class="logged">Logged in as Mr Jones</p> 
    <p class="log">Log out</p> 
    </div> 
    </div> 

在此先感謝。

+0

在http://getbootstrap.com/css/#grid – Faron

回答

0

我建議你閱讀column ordering in the Bootstrap documentation起來。

在「所有者」div上,使用col-sm-push-4類將其「推」到右側,類似地在「已登錄」div使用類col-sm-pull-4將其「拉」到左側。

+0

歡呼,這工作,我會讀更多關於它。 – totneschap

0

如何生根粉這一個: -

<div class="col-xs-4 col-sm-4 col-lg-4" id="logo"> 
    <img src="http://f.cl.ly/items/2B2c3t3d0N0r1F0F1m05/logo-white.png" class="img-responsive"> 
    </div> 
    <div class="col-xs-4 col-sm-4 col-lg-4" id="main-title"> 
    <h1 class="title">Owner Gateway</h1> 
    </div> 
    <div class="col-xs-4 col-sm-4 col-lg-4" id="logged-in"> 
    <p class="logged">Logged in as Mr Jones</p> 
    <p class="log">Log out</p> 
    </div> 
</div> 
+0

有一個指導,謝謝,但沒有設置列的方式,我希望他們的屏幕尺寸縮小時。 – totneschap