css - Bootstrap 如何将元素从垂直对齐到水平

Question

我想实现响应式页面 duckduckgo.com .它有一个 Logo 、DuckDuckGo 文字和一个搜索框。当我将浏览器缩小到几乎水平的条形时，三个组件从垂直对齐到水平， Logo 和文字也变小了。请问如何通过bootstrap实现？

Answer 1

我建议您阅读以下链接中的 Bootstrap 文档:

http://getbootstrap.com/css/

在此链接中，您拥有有关移动分辨率、媒体屏幕等的所有信息。

我做了一个示例来帮助您开始制作您的网站:

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

Bootstrap 有一个自动缩放到屏幕分辨率的“容器”类，类 col-xs-12 意味着它有 width:100% 屏幕直到 768px。 Bootstrap 有一个 12 block 的划分，那么你必须根据这 12 个 block 插入类宽度的分辨率。要使 width:50% 的分辨率达到 768px，您只需插入类 col-xs-6。 如果您不将类插入其他分辨率(col-sm-、col-md-、col-lg-)，col-xs-12 中的 width:100% 将被复制到其他决议。

我根据宽度分辨率更改输入的边距和宽度:

col-xs-10 col-xs-offset-1 = 1 block to margin-left and 10 blocks to input width, 1 + 10 = 11 (1 block missing to complete 12, this is to align horizo​​ntally align the block在中心)。
col-sm-offset-2 col-sm-8 = 2 个 block 到 marign-left，8 个 block 到宽度。
col-md-offset-3 col-md-6 = 3 个 block 到 margin-left 和 6 个 block 到宽度。