Question

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

Answer 1

我建议您阅读以下链接中的bootstrap文档：

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

我做了一个示例来帮助您开始使用您的网站：

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

引导程序有一个＆＃34;容器＆＃34;自动缩放到屏幕分辨率，类col-xs-12意味着它有width:100%屏幕，直到768px。 Bootstrap有12个块的分区，然后你必须插入基于这12个块的分辨率的类宽度。要获得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个块到左边距，10个块到输入宽度，1 + 10 = 11（缺少1个块来完成12，这是为了水平对齐这个块在中心）。
col-sm-offset-2 col-sm-8 =左边2块，宽8块。
col-md-offset-3 col-md-6 =左边3个边块，宽6个边块。

Answer 2

您只需要使用媒体查询。这个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将并排放置。如果acreen是横向的，最小宽度是768，那么div将有width:100%。

Bootstrap如何将项目从垂直对齐到水平

2 个答案: