导航栏没有按我想要的方式工作，列表在左侧的屏幕之外答案

【问题标题】：Navbar not working the way I want it to, list going outside of screen to the left导航栏没有按我想要的方式工作，列表在左侧的屏幕之外
【发布时间】：2015-11-26 21:22:26
【问题描述】：

我的移动导航栏出现问题，左侧有一个可折叠的菜单。正如您在图片中看到的，我希望所有内容都内联并按顺序排列，我放置了彩色边框，以便您更好地理解。

主要问题是黄色边框似乎超出了页面的左侧。

这是 HTML：

<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>

这是我的 CSS：

<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>

【问题讨论】：

标签： html twitter-bootstrap mobile navbar

【解决方案1】：

这是因为 navbar-nav 的负边距为 15px（Bootstrap 默认）。我只是在暗示你所说的不正确

.navbar-nav {
margin: 7.5px -15px;
}

我将你的内容包装到一个容器中

@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;
  }
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class=container-fluid>
  <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>
</div>

【讨论】：

嗨幸运，感谢您的回复。现在它们都排成一列，但还有一个问题：.total div，最大的带有黑色边框的 div，现在不是 100% 的帧。它的左边和白色都有一点空白。任何想法？谢谢！
将总 div 移到 container-fluid 之外