Bootstrap如何從垂直到水平對齊項目

我想實現一些響應，如頁面duckduckgo.com。它有一個標誌，DuckDuckGo文字和一個搜索框。當我將瀏覽器縮小到幾乎水平的橫條時，這三個組件從垂直到水平對齊，標誌和文字也變得更小。我想知道如何通過bootstrap實現它？Bootstrap如何從垂直到水平對齊項目

http://getbootstrap.com/css/

在這個環節你有所有關於手機的分辨率，屏幕媒體等

我做了一個樣本的相關信息：

來源

2014-11-02 user1385809

這是基本的html和css技能。請嘗試一下然後問一個問題。圓圈顯示爲內嵌塊或內聯文本中心，其餘爲搜索輸入（在引導程序中閱讀表單上的文檔）。帶有側面導航的漢堡包不是Bootstrap自帶的。 – Christina 2014-11-03 04:32:16

當頁面高度較低且寬度較大時，您是否看到了響應式功能？ – user1385809 2014-11-03 05:13:07

佈局未正確完成。我總是看到糟糕的響應式佈局實現，很多主題也是如此。好吧。如果您清除了內容並使用靜態或相對位置，請移除浮動塊或從不使用浮動塊開始，這將會被避免。 – Christina 2014-11-03 05:18:16

我建議你在下面這個鏈接閱讀引導文件幫助你開始做你的網站：

的HTML代碼：

<div class="general"> 
    <div class="container"> 
     <header class="col-xs-12"> 
      <img class="logo" src="http://blog.kajrietberg.nl/wp-content/uploads/2013/09/HTML5_oval_logo.png"> 
       <span class="col-xs-12 title">alexfqc sample</span> 
     </header> 

      <main> 
       <input class="col-xs-10 col-xs-offset-1 col-sm-offset-2 col-sm-8 col-md-offset-3 col-md-6 col-lg-offset3 col-lg-6">     
      </main> 
    </div> 
</div>

的CSS代碼：

body{ 
    background-color:#F7F7F7;  
    min-width:320px; 
} 

general{ 
    width:100%; 
} 

header{ 
    margin-top:40px; 
} 

.logo{ 
    width:35%; 
    margin-left:auto; 
    margin-right:auto; 
    display:block; 
} 

.title{ 
    text-align:center; 
    margin-top:10px; 
} 

input{ 
    height:30px; 
}

的引導有一類「容器」，即自動縮放屏幕分辨率，類COL-XS-12意味着這個具有width:100%到屏幕，直到768px。 Bootstrap在12個塊中有一個分區，然後您必須在此12個塊中插入分類寬度的分辨率。要在分辨率下有width:50%直到768px，您只需插入類col-xs-6即可。如果您未將類插入其他分辨率（col-sm-，col-md-，col-lg-），colx-12的width:100%將被複制到其他分辨率。

我改變裕度和根據寬度分辨率的輸入的寬度：

COL-XS-10 COL-XS-偏移-1 = 1塊，以保證金左和10塊輸入寬度，1 + 10 = 11（缺少1個塊來完成12，這是爲了將該塊水平對齊在中心）。
col-sm-offset-2 col-sm-8 = 2塊左移和8塊到寬度。
col-md-offset-3 col-md-6 = 3個塊到margin-left和6個塊到寬度。

來源

2014-11-02 23:35:21

您可以根據不同的寬度進行縮放，我知道如何去做，但這不是我想要的。當屏幕變成「水平條」時，duckduckgo會將徽標和搜索框對齊到一行，並更改徽標的大小。 – user1385809 2014-11-03 00:23:07

您只需要使用媒體查詢。 Mozilla瀏覽器的這個鏈接可以幫助你：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

在CSS一個簡單的例子是這樣的：

@media (max-width: 767px) and (orientation: landscape) { 
    .div1{ 
     width:50%; 
     float:left; 
    } 
    .div2{ 
     width:50%; 
     float:left; 
    } 
} 
@media (min-width: 768px) and (orientation: landscape) { 
    .div1{ 
     width:100%; 
     float:left; 
    } 
    .div2{ 
     width:100%; 
     float:left; 
    } 
}

如果屏幕處於橫向，最大寬度爲767個，則div一定並排排列。如果屏幕處於橫向，最小寬度爲768，則div將有width:100%。

來源

2014-11-03 09:57:52

Bootstrap如何從垂直到水平對齊項目

回答

相關問題