引导程序3 <div> 容器未对齐

Question

I have a little problem with the alignment of my div containers, using Bootstrap 3. There is an overlap of my left sidebar and the top navigation-bar and I don't know why. I deliberately set the z-index to a higher value to show the overlap occurring. Seems like an offset of 11px but I can't explain that. Shouldn't they be aligned edge to edge correctly automatically? The goal is to have a sidebar 220px in width and 100% length.

I wrote some code in 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>

This is the site structure of the whole page. After including the top navigation bar I want to use the grid-system to implement a left-sidebar. The code for both is this:

TOP-NAVIGATIONBAR:

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

LEFT-SIDEBAR:

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

The style.css used is:

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

Because navigation has a class .navbar-fixed-top, bootstrap assigned a position:fixed style rule which then removes it from the flow (forgetting the official term right now). Essentially though, other elements don't recognize it as being there. See this post about css positions . You may have to apply a margin-top of the same amount of pixels as the navigation to get it to not overlap. For example, if the navigation bar height was 50px, then you could set the side-bar margin-top to 50px. Hopefully that was the problem. Again, this is assuming that the overflow is happening at the top.