Question

我的代码存在问题。我试图让我的宽度像它应该的那样工作，但宽度并不想保持在15％。当你向下滚动时，我从100％到15％。

这是我的条形码：

<div id="sidebar-wrapper" style="width: 15%">
    <div class="metro" >
        <nav class="sidebar (light)">
            <ul>
                <li><a class="dropdown-toggle" href="#">Welcome Your Username!</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="">Profile Settings</a></li>
                        <li><a href="">Change Password</a></li>
                        <li><a href="">Tracking Log</a></li>
                    </ul>
                </li>

                <li><a href="/sheridan">Home</a></li>
                <li><a href="/sheridan/news">News</a></li>

                <li><a href="/sheridan/memberlist">Members List</a></li>

                <li>
                    <a class="dropdown-toggle" href="#">Application Development</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/app/assembler">Assembly</a></li>
                        <li><a href="/sheridan/app/c">C,C#,C++</a></li>
                        <li><a href="/sheridan/app/java">Java</a></li>
                        <li class="divider"></li>
                        <li><a href="/sheridan/app/linux">Linux</a></li>
                    </ul>
                </li>

                <li>
                    <a class="dropdown-toggle" href="#">Web Development</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/web/html">HTML/CSS</a></li>
                        <li><a href="/sheridan/web/js">Javascript</a></li>
                        <li><a href="/sheridan/web/php">PHP/MySQL</a></li>
                    </ul>
                </li>

                <li>
                    <a class="dropdown-toggle" href="#">Math</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/math/calculus">Calculus</a></li>
                        <li><a href="/sheridan/math/discrete">Discrete Math</a></li>
                        <li><a href="/sheridan/math/statistic">Statistic</a></li>
                        <li class="divider"></li>
                        <li><a href="">R</a></li>
                    </ul>
                </li>

                <li>
                    <a class="dropdown-toggle" href="#">Article</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/submit">Create An Article</a></li>
                        <li><a href="/sheridan/getCode">Article Approval</a></li>
                    </ul>
                </li>

                <li>
                    <a class="dropdown-toggle" href="#">Picture</a>
                    <ul class="dropdown-menu" data-role="dropdown">
                        <li><a href="/sheridan/picture">View Picture</a></li>
                        <li><a href="">Upload A Picture</a></li>
                        <li><a href="/sheridan/picture/approval">Picture Approval</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>

当我测试它时，一切正常。但现在什么都不想工作。我一直试图弄清楚它1小时没有任何工作......

有谁知道可能是什么问题？

您可以在https://www.jmdev.ca/sheridan/查看它，在https://www.jmdev.ca/sheridan/test/

查看工作版本

Answer 1

您定位错误的元素。这就是你真正想要的：

<nav class="sidebar (light)">

它设置为position: fixed，这就是为什么它忽略了15%的父宽度。 .sidebar上的属性如下：

.metro .sidebar {
   margin: 0;
   padding: 0;
   background-color: #3D3D3D;
   width: 100%; <------------- this
   height: 100%; 
}

调整width并应该更正

Answer 2

.metro .sidebar 
    {
       margin: 0;
       padding: 0;
       background-color: #3D3D3D;
       width: 275px;
       height: 100%;
       overflow: hidden;
    }

列表项

在Metro-bootstrap.css文件中替换此css

侧栏宽度不响应100％宽度可点击

2 个答案: