Question

我的div容器对齐有点问题，使用Bootstrap 3.我的左侧边栏和顶部导航栏有重叠，我不知道为什么。我故意将z-index设置为更高的值以显示重叠发生。看起来像11px的偏移，但我无法解释。它们不能自动正确对齐边缘到边缘吗？目标是有一个宽度为220px，长度为100％的侧边栏。

我在HTML / PHP中编写了一些代码：

<?php
include 'core/includes/overall/header.php';
?>
<div class="site-holder">
    <?php include 'core/includes/topNavigation.php' ?>
    <div class="row">
        <div class="left-sidebar">
            <?php include 'core/includes/leftSidebar.php'; ?>
        </div>
    </div>
    <?php include 'core/includes/overall/footer.php'; ?>
</div>

这是整个页面的网站结构。在包含顶部导航栏后，我想使用网格系统来实现左侧边栏。两者的代码是：

TOP-导航栏：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">MEDIFAKTOR online</a>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navHeaderCollapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Start</a></li>
                <li><a href="#">Blog</a></li>
            </ul>
        </div>
    </div>
</div>

左侧的侧边栏中：

<ul class="nav">
    <li class="active">
        <a href="#">Dashboard</a>
    </li>
    <li class="">
        <a href="#">Test</a>
    </li>
</ul>

使用的style.css是：

body {
    padding-top: 50px;
}

.template-setup {
    padding: 40px 15px;
    text-align: left;
}

.site-holder {
    min-height: 1200px;
    overflow: hidden;
    position: relative;
}

.box-holder {
    min-height: 1200px;
}

.content {
}

.left-sidebar {
    font-family: 'Open Sans', sans-serif;
    background-color: #BBBBBB;
    color: #80969C;
    width: 220px;
    position: absolute;
    z-index: 1050;
}

Answer 1

因为导航有一个类.navbar-fixed-top，bootstrap分配了一个position:fixed样式规则，然后将其从流中删除（现在忘记了官方术语）。基本上，其他元素并不认为它在那里。见this post about css positions。您可能必须应用与导航相同数量的像素margin-top才能使其不重叠。例如，如果导航栏高度为50px，则可以将侧边栏边距顶部设置为50px。希望这是问题所在。同样，这是假设溢出发生在顶部。

Bootstrap 3 <div>容器未对齐</div>

1 个答案: