列不对齐。引导程序答案

【问题标题】：Columns don't align. Bootstrap列不对齐。引导程序
【发布时间】：2015-01-01 20:36:30
【问题描述】：

我正在使用 Bootstrap，我想知道为什么列没有正确对齐。即使我调整其宽度并使其适合，第二列也会低于第一列。我真的很想知道。但是我的元素编码正确。我什至尝试使用内联块，但它相互重叠。这是 HTML 和 CSS 的代码

代码：(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>

代码：（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%;

}

【问题讨论】：

您正在测试的设备尺寸是多少？ bootstrap 被设计为在没有足够空间时响应并包裹列。也许使用sm 而不是md 是你想要的？
Bootply 中的问题：bootply.com/J338LOBxGz。如果您希望它旁边是小尺寸，请使用 sm 而不是中号。你的网格不是 8 和 4 或 10 和 2 有什么原因吗？
我用的是笔记本电脑，这就是我使用 md 的原因。
我想通了。感谢您的帮助。

标签： html css twitter-bootstrap grid

【解决方案1】：

将这两行添加到sidenav样式中：

   position: absolute;
   right: 0px;
   top: 0px;

这会迫使它向右推。

它并不完全在顶部，因为你有一个顶部边距。

这是一个 jsfiddle：http://jsfiddle.net/briggs_w/qvwp9wjg/

这是一个不使用 Bootstrap 功能的答案。不确定这是否是您想要的。

【讨论】：

【解决方案2】：

您不应该为列设置宽度，Bootstrap 的 col-* 类已经根据视口的宽度以百分比设置了适当的宽度。

尝试从 CSS 中删除 widths，然后在侧边栏上使用 col-sm-4，在内容上使用 col-sm-8，看看这是否是您想要的效果。

查看下面的代码 sn-p（全页运行并调整浏览器大小以查看布局更改）。

.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>

【讨论】：

是什么不工作？也许其他一些风格正在发生冲突，我只是使用了你发布的内容。您究竟需要如何对齐列？