侧面导航栏左侧的空白区域

Question

我正在尝试在ASP.NET中为我的视图添加侧边栏。

我快完成了，但是在侧边栏的左侧有一个空格，这导致宽度超过100％的宽度（注意滚动条）

这是滚动条打开的时间：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title>Profile</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="~/Content/profilePageSheet.css" rel="stylesheet" />
</head>
<body>

<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li><a href="#">Profile</a></li>
            <li><a href="#">Job experience</a></li>
            <li><a href="#">Profile details</a></li>
        </ul>
    </div>

    <!-- Page content -->
    <div id="page-content-wrapper">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <a href="#" class="btn btn-success" id="menu-toggle">Menu</a>
                    <h1>Profile</h1>
                    <p>
                        Lorem ipsum dolor... 
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Menu toggle script -->
<script>
    $("#menu-toggle").click(function (e) {
        e.preventDefault();
        $("#wrapper").toggleClass("menuDisplayed");
    });
</script>

CSS

#wrapper {
    float:left;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

/* Sidebar */
#sidebar-wrapper {
    z-index: 1;
    position: absolute;
    width: 0;
    height: 100%;
    overflow-y: hidden;
    background: #2C3E50;
    border: 2px solid red;
    opacity: 0.9;
    transition: .5s ease-out;
}

/* Always take up entire screen */
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
    border: 5px solid blue;
    transition: .5s ease-out;
}


/* Change with of sidebar from 0 to 250px */
.menuDisplayed #sidebar-wrapper {
    width: 250px;
}

/* Since we added left padding, we need to shrink the width by 250px */
.menuDisplayed #page-content-wrapper {
    padding-left: 250px;
}


/* Sidebar styling - the entire ul list */
.sidebar-nav {
    padding: 0;
    list-style: none;
}

    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
    }

    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #ddd;
    }

    .sidebar-nav li a:hover {
        background: #afaeae;
    }

我也尝试将其添加到样式表中：

#wrapper {
    float:left;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

在我看来，这是一种风格问题。 由于我在Visual Studio ASP.NET中正常工作，因此您是否知道是否存在自动生成的CSS文件可能会造成干扰？

Answer 1

尽管它不能完全回答您的问题，但这一点

#page-content-wrapper {
    width: 100%;
    margin-right: 20%;
    position: absolute;
    padding: 15px;
    border: 5px solid blue;
    transition: .5s ease-out;
}

可能会给您带来一些问题。 您将元素的宽度设置为100％，然后在每侧添加15px的填充（由于填充位于block元素内部，因此将其添加到宽度中）。

同样，边框也将增加块元素的宽度，从而进一步增加水平滚动。

侧面导航栏左侧的空白区域

问题描述

1 个解决方案

解决方案1
1 2018-04-26 14:58:27

侧面导航栏左侧的空白区域

问题描述

1 个解决方案

解决方案1 1 2018-04-26 14:58:27

解决方案1
1 2018-04-26 14:58:27