Bootstrap立柱确实不水平
Bootstrap colums algining veritcaly not horizontaly
我目前正在开发一些包含缩略图图像的列。我不明白为什么列没有像我希望的那样水平对齐。
这是我所指的一段html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Townsville Rentals</title>
<!-- Bootstrap Css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="Index.css" rel="stylesheet">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="wrapper">
<div class="header">
<img class="logo" src="images/logo.png" alt="logo">
<ul class="nav pull-right">
<li class="nav-text">HOME</li>
<li class="nav-text">ABOUT</li>
<li class="nav-text">PROPERTY OWNERS</li>
<li class="nav-text">TENATS</li>
<li class="nav-text">CONTACT US</li>
<li class="nav-number">1300 702 305</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="top-content">
<img class="arrows" src="images/arrows.png" alt="arrows">
<img class="slider" src="images/slider.png" alt="slider">
</div>
</div>
<div class="wrapper">
<h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
<div class="row">
<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
<div class=".col-md-4"><img src="images/fees.png" alt="fees"></div>
<div class=".col-md-4"><img src="images/four.png" alt="four"></div>
<div class=".col-md-4"><img src="images/realistic.png" alt="real"></div>
<div class=".col-md-4"><img src="images/regular.png" alt="reg"></div>
<div class=".col-md-4"><img src="images/relax.png" alt="relax"></div>
</div>
</div>
<div class="wrapper">
<div class="">
</div>
</div>
</body>
</html>
下面是相关的CSS：
html,body
{
margin-left: auto;
margin-right: auto;
width: 1370px;
}
.wrapper
{
margin-left: auto;
margin-right: auto;
width: 100%;
}
.header
{
margin: auto;
max-width: 1370px;
}
.logo
{
padding-left: 50px;
padding-top: 30px;
}
.nav
{
}
.nav-text
{
display: inline-block;
float: left;
font-family: "GothamSSm Meduim";
font-size: 12px;
font-style: bold;
list-style-type: none;
max-height: 100%;
max-width: 100%;
overflow: hidden;
padding-right: 70px;
top: 45px;
}
.nav-number
{
color: #45aa4a;
display: inline;
float: right;
font-family: "GothamSSm Meduim";
list-style-type: none;
max-height: 100%;
max-width: 100%;
overflow: hidden;
padding-right: 65px;
top: 45px;
}
.arrows
{
padding-left: 575px;
padding-right: 685px;
padding-top: 45px;
}
.slider
{
margin-left: auto;
margin-right: auto;
max-height: 100%;
max-width: 100%;
padding-top: 60px;
}
.thumbnail-title
{
margin-left: auto;
margin-right: auto;
padding-top: 250px;
text-align: center;
}
.thumbnail
{
border: 2px solid red;
display: inline;
}
实际上，根据引导网格系统，屏幕的整个宽度被划分为12个部分，用于各种屏幕
所以你必须根据网格系统划分只有
请不要像这个一样在标签中的类名前加.[点]
<div class=".col-md-2"><img src="images/extra.png" alt="extra"></div>
^
点只能用于书写风格！
对于你的要求，试试这样：
<div class="row">
<div class="col-md-2">
<img src="layouts/08.png" alt="extra"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="fees"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="four"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="real"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="reg"></div>
<div class="col-md-2">
<img src="layouts/11.png" alt="relax"></div>
</div>
请参阅[jsfiddle]http://jsfiddle.net/matildayipan/vzg9fhot/3/
如前所述，您在类属性中添加了点。但是您也错过了css 中的类声明
<div class="wrapper">
<div class="header">
<img class="logo" src="images/logo.png" alt="logo">
<ul class="nav pull-right">
<li class="nav-text">HOME</li>
<li class="nav-text">ABOUT</li>
<li class="nav-text">PROPERTY OWNERS</li>
<li class="nav-text">TENATS</li>
<li class="nav-text">CONTACT US</li>
<li class="nav-number">1300 702 305</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="top-content">
<img class="arrows" src="images/arrows.png" alt="arrows">
<img class="slider" src="images/slider.png" alt="slider">
</div>
</div>
<div class="wrapper">
<h3 class="thumbnail-title"> OUR GUARANTEE TO YOU </h3>
<div class="row">
<div class="col-md-2"><img src="images/extra.png" alt="extra"></div>
<div class="col-md-4"><img src="images/fees.png" alt="fees"></div>
<div class="col-md-4"><img src="images/four.png" alt="four"></div>
<div class="col-md-4"><img src="images/realistic.png" alt="real"></div>
<div class="col-md-4"><img src="images/regular.png" alt="reg"></div>
<div class="col-md-4"><img src="images/relax.png" alt="relax"></div>
</div>
</div>
<div class="wrapper">
<div class="">
</div>
</div>
Css:
.col-md-2{
//add your css
}
.col-md-4{
//add your css
}
html,body {
margin-right: auto;
margin-left: auto;
width:1370px;
}
.wrapper{
margin-right: auto;
margin-left: auto;
width:100%;
}
/* Start of header*/
.header{
margin:auto;
max-width: 1370px;
}
.logo{
padding-left:50px;
padding-top:30px;
}
.nav-text{
display: inline-block;
list-style-type:none;
top:45px;
float: left;
font-family: "GothamSSm Meduim";
font-size:12px;
font-style:bold;
padding-right: 70px;
max-width:100%;
max-height: 100%;
overflow: hidden;
}
.nav-number{
display: inline;
list-style-type:none;
float:right;
top:45px;
padding-right:65px;
color:#45aa4a;
font-family: "GothamSSm Meduim";
max-width:100%;
max-height: 100%;
overflow:hidden;
}
/* End of header container*/
/* Start of top content*/
.arrows{
padding-right:685px;
padding-left: 575px;
padding-top:45px;
}
.slider{
margin-left: auto;
margin-right: auto;
padding-top:60px;
max-width:100%;
max-height: 100%;
}
/*end */
.thumbnail-title {
padding-top: 250px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.thumbnail{
display:inline;
border: 2px solid red;
}
相关文章：
- 如何在Bootstrap Modal中为动态点击生成的变量设置jade属性
- 浮动页脚栏-使用Bootstrap隐藏
- Twitter Bootstrap typeahead:使用“this”获取上下文/调用元素
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- AngularJS/HTML/Bootstrap元素用于动态搜索结果
- Javascript+Bootstrap图像库未加载
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- Bootstrap 3 Datepicker v4:dp.show和dp.change事件在Datepicker内联时不
- Bootstrap-三列相等;t更改'a'要素
- 在bootstrap中显示隐藏特定的li
- 允许表单元格内容水平展开
- 如何在c3js动态图表上进行平滑(水平）转换
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- Twitter Bootstrap 2.1.0子菜单在Responsive上看起来很混乱
- Bootstrap折叠按钮不适用于android
- bootstrap消除模态并显示另一个模态
- Bootstrap 3模式从水平到内联的变化-调整大小很尴尬
- Bootstrap表的自定义水平和垂直滚动条
- Bootstrap v3.2组件显示(折叠水平面板）
- Bootstrap立柱确实不水平
