Html 导航栏没有按我希望的方式工作，列表在屏幕左侧
我的移动导航栏有问题，左边有一个可折叠菜单。正如你在图中所看到的，我希望所有的东西都是内联的，为了让你更好地理解，我把彩色边框放进去 主要问题是黄色边框似乎超出了页面的左侧。 这是HTML：Html 导航栏没有按我希望的方式工作，列表在屏幕左侧,html,twitter-bootstrap,mobile,navbar,Html,Twitter Bootstrap,Mobile,Navbar,我的移动导航栏有问题，左边有一个可折叠菜单。正如你在图中所看到的，我希望所有的东西都是内联的，为了让你更好地理解，我把彩色边框放进去 主要问题是黄色边框似乎超出了页面的左侧。 这是HTML： <head> <title>Bootstrap Case</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"> </script>
</head>
<body>
<nav>
<div class="total">
<ul class="nav navbar-nav">
<li >
<div class="id"><a style="width:100px" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">My details</a></li>
<li><a href="#"> My account</a></li>
<li><a href="#">Logout</a></li>
</ul>
</div>
</li>
<li>
<div class="no"><p class="bartitle"><b>Title of Page</b></p></div>
</li>
</ul>
</div>
</nav>
</body>
</html>
引导盒
-
-
<style>
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
body {
margin: 0;
padding: 0;
background: rgba(36, 96, 70, 1);
width:100%;
}
nav {
width: 100%;
margin:0 auto;
padding:0;
}
ul {
position:relative;
margin-top:-10px;
list-style: none;
width:105%;
padding: 0;
margin-left:10px;
height:70px;
border:solid yellow;*/
}
nav div ul li .id {
margin-top:-10px;
margin:10px;
float:left;
width:15%;
border:solid pink;*/
}
li .no {
float:left;
width:78%;
border:solid blue;*/
}
.id {
width: 20px;
border: solid black;*/
}
.no {
width: 60px;
height:50px;
/*border: solid black;*/
}
.total {
width:100%;
font-family:arial;
color:white;
padding:0;
display: block !important;
width: 100%;
background: #cdeb8e; /* Old browsers */
background: -moz-linear-gradient(top,
#cdeb8e 0%, #b0ca34 100%); /* FF3.6+ */
background: rgba(36,96,70, 1);
border:solid black;*/
}
.barimage {
margin-top:15px;
width:120px;
height:120px;
border:0;
}
.bartitle {
font-size:30px;
text-align:left;
}
.dropdown-menu {
width:40px;
}
}
</style>
@仅媒体屏幕
和（最小设备宽度：320px）
和（最大设备宽度：568px）
和（-webkit最小设备像素比：2）{
身体{
保证金：0；
填充：0；
背景：rgba（36,96,70,1）；
宽度：100%；
}
导航{
宽度：100%；
保证金：0自动；
填充：0；
}
保险商实验室{
位置：相对位置；
利润上限：-10px；
列表样式：无；
宽度：105%；
填充：0；
左边距：10px；
高度：70像素；
边框：纯黄色*/
}
导航分区ul li.id{
利润上限：-10px；
利润率：10px；
浮动：左；
宽度：15%；
边框：纯粉红色*/
}
李，没有{
浮动：左；
宽度：78%；
边框：纯蓝色*/
}
.id{
宽度：20px；
边框：纯黑*/
}
不{
宽度：60px；
高度：50px；
/*边框：纯黑*/
}
.总数{
宽度：100%；
字体系列：arial；
颜色：白色；
填充：0；
显示：块！重要；
宽度：100%；
背景：#cdeb8e；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，
#cdeb8e 0%，#b0ca34 100%）；/*FF3.6+*/
背景：rgba（36,96,70,1）；
边框：纯黑*/
}
barimage先生{
边缘顶部：15px；
宽度：120px；
高度：120px；
边界：0；
}
巴蒂特尔先生{
字体大小：30px；
文本对齐：左对齐；
}
.下拉菜单{
宽度：40px；
}
}
.navbar-nav {
margin: 7.5px -15px;
}
@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：568px）和（-webkit最小设备像素比：2）{
身体{
保证金：0；
填充：0；
背景：rgba（36,96,70,1）；
宽度：100%；
}
导航{
宽度：100%；
保证金：0自动；
填充：0；
}
保险商实验室{
位置：相对位置；
利润上限：-10px；
列表样式：无；
宽度：105%；
填充：0；
左边距：10px；
高度：70像素；
边框：纯黄色；
*/
}
导航分区ul li.id{
利润上限：-10px；
利润率：10px；
浮动：左；
宽度：15%；
边框：纯粉红色；
*/
}
李，没有{
浮动：左；
宽度：78%；
边框：纯蓝色；
*/
}
.id{
宽度：20px；
边框：纯黑；
*/
}
不{
宽度：60px；
高度：50px；
/*边框：纯黑*/
}
.总数{
宽度：100%；
字体系列：arial；
颜色：白色；
填充：0；
显示：块！重要；
宽度：100%；
背景#cdeb8e；
/*旧浏览器*/
背景：-moz线性梯度（顶部，#cdeb8e 0%，#b0ca34 100%）；
/*FF3.6+*/
背景：rgba（36,96,70,1）；
边框：纯黑；
*/
}
barimage先生{
边缘顶部：15px；
宽度：120px；
高度：120px；
边界：0；
}
巴蒂特尔先生{
字体大小：30px；
文本对齐：左对齐；
}
.下拉菜单{
宽度：40px；
}
}
-
-
-
-
-
.navbar-nav {
margin: 7.5px -15px;
}
@仅媒体屏幕和（最小设备宽度：320px）和（最大设备宽度：568px）和（-webkit最小设备像素比：2）{
身体{
保证金：0；
填充：0；
背景：rgba（36,96,70,1）；
宽度：100%；
}
导航{
宽度：100%；
保证金：0自动；
填充：0；
}
保险商实验室{
位置：相对位置；
利润上限：-10px；
列表样式：无；
宽度：105%；
填充：0；
左边距：10px；
高度：70像素；
边框：纯黄色；
*/
}
导航分区ul li.id{
利润上限：-10px；
利润率：10px；
浮动：左；
宽度：15%；
边框：纯粉红色；
*/
}
李，没有{
浮动：左；
宽度：78%；
边框：纯蓝色；
*/
}
.id{
宽度：20px；
边框：纯黑；
*/
}
不{
宽度：60px；
高度：50px；
/*边框：纯黑*/
}
.总数{
宽度：100%；
字体系列：arial；
颜色：白色；
填充：0；
显示：块！重要；
宽度：100%；
背景#cdeb8e；
/*旧浏览器*/
背景：-moz线性梯度（顶部，#cdeb8e 0%，#b0ca34 100%）；
/*FF3.6+*/
背景：rgba（36,96,70,1）；
边框：纯黑；
*/
}
barimage先生{
边缘顶部：15px；
宽度：120px；
高度：120px；
边界：0；
}
巴蒂特尔先生{
字体大小：30px；
文本对齐：左对齐；
}
.下拉菜单{
宽度：40px；
}
}
-
-
-
-
-