列不对齐。引导
问题描述：
我正在使用Bootstrap，我想知道为什么列没有正确对齐。即使我调整了宽度并使其适合，第二列也低于第一列。我真的好奇。但是我的元素被正确编码。我甚至尝试使用内联块，但它互相重叠。下面是HTML和CSS代码列不对齐。引导
CODE：（HTML）
<body>
<div class = "container">
<div class = "row">
<div class = "banner">
<div class = "bannerimg">
</div>
</div>
</div>
<div class = "row">
<div class = "col-md-2">
<div class = "navigation">
<div class = "sidenav1">
<ul class = "list">
<li><a href = "#">Home</a></li>
<li><a href = "#">Track</a></li>
<li><a href = "#">Program</a></li>
<li><a href = "#">Vehicles</a></li>
<li><a href = "#">Prices</a></li>
<li><a href = "#">Photos</a></li>
<li><a href = "#">Our Staff</a></li>
<li><a href = "#">Comments</a></li>
<li><a href = "#">Links</a></li>
<li><a href = "#">Contact</a></li>
<li><a href = "#">About Us</a></li>
</ul>
</div>
</div>
</div>
<div class = "col-md-8">
<div class = "mainContent">
</div>
</div>
</div>
</div>
CODE：（CSS）
.bannerimg
{
background-color: black;
border: 1px solid yellow;
height: 125px;
max-width: 100%;
display: block;
}
.list
{
list-style-type: none;
margin-left: -10px;
}
.sidenav1
{
background-color: orange;
border: 1px solid yellow;
max-height: 40%;
width: 150px;
margin-top: 20px;
}
.mainContent
{
border-color: orange;
border: 1px solid yellow;
margin-top: 20px;
width: 70%;
}
答
你不应该设置宽度为柱，引导的col-*类已经根据视口的宽度以百分比设置适当的宽度。
尝试从您的CSS中删除width，然后在侧边栏上使用col-sm-4，在内容上使用col-sm-4，并查看是否您要的效果。
查看下面的代码片段（运行它的全页并调整浏览器的大小以查看布局更改）。
.bannerimg
{
background-color: black;
border: 1px solid yellow;
height: 125px;
max-width: 100%;
display: block;
}
.list
{
list-style-type: none;
margin-left: -10px;
}
.sidenav1
{
background-color: orange;
border: 1px solid yellow;
max-height: 40%;
/*width: 150px;*/
margin-top: 20px;
}
.mainContent {
border-color: orange;
border: 1px solid yellow;
margin-top: 20px;
/*width: 70%;*/
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "container">
<div class = "row">
<div class = "banner">
<div class = "bannerimg">
Some image
</div>
</div>
</div>
<div class = "row">
<div class = "col-sm-4">
<div class = "navigation">
<div class = "sidenav1">
<ul class = "list">
<li><a href = "#">Home</a></li>
<li><a href = "#">Track</a></li>
<li><a href = "#">Program</a></li>
<li><a href = "#">Vehicles</a></li>
<li><a href = "#">Prices</a></li>
<li><a href = "#">Photos</a></li>
<li><a href = "#">Our Staff</a></li>
<li><a href = "#">Comments</a></li>
<li><a href = "#">Links</a></li>
<li><a href = "#">Contact</a></li>
<li><a href = "#">About Us</a></li>
</ul>
</div>
</div>
</div>
<div class = "col-sm-8">
<div class = "mainContent">
Some content
</div>
</div>
</div>
</div>
答
这两行添加到sidenav风格：
position: absolute;
right: 0px;
top: 0px;
这将迫使它来推动它的权利。
它并不完全位于顶部，因为您有一个顶部边距。
这里有一个的jsfiddle：http://jsfiddle.net/briggs_w/qvwp9wjg/
这是不使用引导功能的答案。不知道这是你想要的。
您正在测试的设备的尺寸是多少？ bootstrap被设计为响应并且在没有足够空间时包装列。也许使用'sm'而不是'md'就是你想要的？ – briansol 2014-11-05 15:28:59
Bootply中的问题：http：//www.bootply.com/J338LOBxGz。如果你想在小尺寸旁边使用'sm'，而不是中等。是否有理由为什么你的网格不是8和4或10和2？ – Aibrean 2014-11-05 15:37:56
我正在使用笔记本电脑，这就是为什么我使用MD。 – Jessie 2014-11-06 11:49:11