Bootstrap如何从垂直到水平对齐项目
Bootstrap如何从垂直到水平对齐项目
提问于 2014-11-03 06:09:08
我想实现一些响应式的东西，比如页面duckduckgo.com。它有一个徽标、DuckDuckGo文字和一个搜索框。当我将浏览器缩小到一个几乎水平的条时，三个组件从垂直到水平对齐，徽标和文字也变小了。我想知道如何通过bootstrap实现它？
Stack Overflow用户
发布于 2014-11-03 07:35:21
我建议您阅读以下链接中的引导程序文档：
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表示在768px之前有width:100% to screens。Bootstrap有一个12个块的划分，然后你必须插入基于这12个块的分辨率的类宽度。要在分辨率低于768px的情况下使用width:50%，只需插入width:50%-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-2ol-sm-8=向左对齐2个块，向左宽8个块。
col-md-offset-3 col-md-6 =左边缘3个区块，宽度6个区块。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26705013
复制相关文章
相似问题
腾讯云开发者
