我想制作像facebook这样的通知菜单，但是当屏幕很小的时候我想让下拉菜单100％宽度。我找到了我想要的脚本，但是当我与我的脚本比较时，它也一样。这里发现的脚本：
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | Facebook Style Header Notification using PHP Ajax Bootstrap</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Webslesson Tutorial</a>
</div>
<ul class="nav navbar-nav navbar-right">
<!--this part I'm focusing on-->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-pill label-danger count" style="border-radius:10px;"></span> <span class="glyphicon glyphicon-envelope" style="font-size:18px;"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#">
<strong>ahahaha</strong><br />
<small><em>ihihihih</em></small>
</a>
</li>
<li class="divider"></li>
</ul>
</li>
<!----end part i'm focusing on--->
</ul>
</div>
</nav>
</body>
</html>
这是我的脚本，专注于通知菜单。我没看到差异。但是当屏幕很小时它不是100％宽度。
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header pull-left">
<a href="/" class="navbar-brand">WEBSITE</a>
</div>
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!--and this part look like same but the result is defferent--->
<li class="dropdown pull-right">
<a href="#" data-toggle="dropdown" style="color:#777; margin-top: 5px;padding:9px 3px;background-color: transparent;" class="dropdown-toggle">@username<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<a href="">
<strong>ahahaha</strong><br />
<small><em>ihihihih</em></small></a>
</li>
<li class="divider"></li>
</ul>
</li>
<!--end part that i'm focused on--->
</ul>
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<div class="visible-xs-block clearfix"></div>
<div class="collapse navbar-collapse navbar-left">
<ul class="nav navbar-nav pull-left">
<li><a href="/news">Files</a></li>
<li><a href="/news">Forums</a></li>
<li><a href="/Shop">Project</a></li>
</ul>
</div>
<div class="collapse navbar-collapse navbar-right">
<form class="navbar-form" role="search">
<div class="form-group">
<div id="imaginary_container">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" placeholder="Search" >
<span class="input-group-addon">
<button type="submit">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</nav>
<script src="js/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>