Question

我正在使用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%;

}

Answer 1

您不应将宽度设置为列，Bootstrap的col-*类已设置适当的宽度百分比，具体取决于视口的宽度。

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

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

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

Answer 2

将这两行添加到sidenav样式：

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

强迫它推动它。

它没有完全位于顶部，因为你有一个上边距。

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

这是一个没有使用Bootstrap功能的答案。不确定这是不是你想要的。

列不对齐。引导

2 个答案: