如何使用Bootstrap幫助將標題的一部分對齊

我試圖找到一個解決方案，但沒有以我想要的方式工作。我從Bootstrap開始，我可能錯過了一些東西。如何使用Bootstrap幫助將標題的一部分對齊

目前，我有工作likede這個

報頭爲：大屏幕

|[ Website name ]     | 
|       [log off]| 
|      [[ lan1ang2 ]]|

報頭爲：手機屏幕

|[ Website name ]     | 
|        [log off]| 
|     [[ lang1 ][ lang2 ]]|

我下面的代碼（示例代碼here）想讓大屏幕的標題看起來像這樣：

|[ Website name ]   [ log off ]| 
|      [[ lang1 ][ lang2 ]]|

而對於手機屏幕的標題應該是這樣的：

|[ Website name ]    | 
|[[ lang1 ][ lang2 ]] [log off]|

感謝任何提示或答案。

來源

2016-04-05 P.Milan

分享你當前的代碼 –

它在鏈接「here」 –

你需要涉獵多一點到Grid Template for Bootstrap看個究竟時，你的屏幕小col-xs-X （手機），中型col-md-X（平板電腦）或大型col-lg-X（臺式機）。您只爲桌面設置網格，但如果用戶使用手機，該怎麼辦？

更好的方法來解決這個問題，移動第一的方法，所以你可以擴大你的畫布（作爲一個網站只是一幅畫），並更多地控制你的網頁上發生的事情。

Here's a JSFiddle看到你想要的東西。

爲了得到你想要的，這些項目應該在移動設備上顯示相同的長度（因此左側區域和右側區域的col-xs-12相等）。請注意平板電腦上的差異：col-md-8和col-md-4。我希望這會讓你開始更多地瞭解Bootstrap中的網格模板。

來源

2016-04-05 10:19:23 Roy

謝謝。這幾乎可以。你有沒有想法，爲什麼語言部分不像登錄部分那樣對齊（文本）到右側？ https://jsfiddle.net/Pmilan/441u5763/7/ –

@ P.Milan因爲你把英文和德文寫在'.col-sm-3'裏，所以他們在那兒玩。刪除它們並使用例如列表，請參閱此JSFiddle：https://jsfiddle.net/f86wmtxv/ – Roy

好的，我可以在之前執行此操作。我想問問有沒有自舉的解決方案。很明顯不是。感謝您的快速回答。 –

有兩種可能的解決方案：您可以嘗試使所有工作在一個row -div和不同的col-push s和col-pull s爲不同的大小。因爲這可能會帶來麻煩，我建議只使用visible

<div class="col-sm-6 namesite"> 
    <h1><a href="/">My website</a></h1> 
</div> 
<div class="col-sm-6 logoff visible-sm visible-lg"> 
    <a href="/" class="pull-right">logoff</a> 
</div> 
... 
<div class="row visible-xs"> 
     <section id="login" class="pur">...

這裏的小提琴：https://jsfiddle.net/gkzfkggn/

來源

2016-04-05 10:19:11 Arerrac

如何使用Bootstrap幫助將標題的一部分對齊

回答

相關問題