引導程序中的列重新對齊3

我試圖重新對齊引導程序中的列，但目前爲止失敗。這是它在桌面視圖中顯示的很好的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>

在此先感謝。

來源

2014-01-14 totneschap

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

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

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

來源

2014-01-14 11:57:33 Konc

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

如何生根粉這一個： -

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

來源

2014-01-14 11:56:47 Anup

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

引導程序中的列重新對齊3

回答

相關問題