側面導航欄左側的空白區域

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