Question

幻灯片位于导航元素后面。我刚刚开始使用hmtl和css，我想知道如何保持分离。我想要实现的是无论导航的宽度如何，身体将向左调整但不会落后于它。任何建议将不胜感激！

页面的CSS

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

.body-content {
    transition: margin-left .5s;
}

input,
select,
textarea {
    max-width: 280px;
}

.carousel-caption p {
    font-size: 20px;
    line-height: 1.4;
}

.carousel-inner .item img[src$=".svg"] {
}

页面的导航css

.sidenav {
    margin-right: 20px;
    float: left;
    height: 100%; 
    width: 250px; 
    position: fixed;
    z-index:1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    padding-top: 60px; 
    transition: 0.5s;
}

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s
    }

        .sidenav a:hover, .offcanvas a:focus {
            color: #f1f1f1;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 60px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

@media screen and (max-width: 767px) {
    /* Hide captions */
    .carousel-caption {
        display: none;
    }
}

页面的HTML

<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Computer Repair</a>
    </nav>
    <section id="sideNavigation" class="sidenav">
        <a asp-area="" asp-controller="Home" asp-action="Index">Home</a>
        <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
        <a asp-area="" asp-controller="Home" asp-action="About">About</a>
        <a id="btnShowHide">Close</a>
    </section>
    <section id="main" class="body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; 2017 - Test</p>
            </footer>
    </section>

        <environment names="Development">
            <script src="~/lib/jquery/dist/jquery.js"></script>
            <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
            <script src="~/js/site.js" asp-append-version="true"></script>
        </environment>
        <environment names="Staging,Production">
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
            </script>
            <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
            </script>
            <script src="~/js/site.min.js" asp-append-version="true"></script>
        </environment>
        @RenderSection("Scripts", required: false)
</body>

Answer 1

固定的位置总是计算（右上角 - 左下角）到浏览器，你还需要向body-content类添加margin-left

＆＃13;

.body-content{
  margin-left: 250px;
}

＆＃13;

如果这不起作用，请告诉我。

Answer 2

好的，我相信这会对你有所帮助。你的sidenav宽度是250px所以给滑动面板的宽度或身体的正确内容

width:calc(100% - 250px);
float:right;

元素继续追随其他元素

2 个答案: