小设备响应后右键菜单中断

Question

将我的引导程序网页调整为较小（当出现3个菜单行）设备并单击菜单按钮时，右侧菜单项显然显示在较低位置，因为您可以在代码段中看到它。但有没有办法让这个菜单更好的地方？

.navbar-fixed-top .navbar-nav.navbar-right {
  padding-top: 10px;
}

.navbar-default .navbar-nav li a:hover {
  color: #0295d5;
}

.navbar-fixed-top .navbar-nav.navbar-right li {
  padding-top: 4px;
} 
.navbar-fixed-top .navbar-nav.navbar-right .glyphicon {
  font-size: 24px;
}
.navbar-fixed-top .navbar-nav.navbar-right li {
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.navbar-fixed-top .navbar-nav.navbar-right li:not(:first-child):before {
  content: " | ";
  margin-right: 10px;
}

.mail .badge.danger {
  color: #fff;
  background-color: #0185BF;
  border-color: #0183BC;
  padding-bottom: 5px;
  font-size: 10px;
  position: absolute;
  padding: 3px 5px;
  top: -4px;
  right: -8px;
}

.navbar-nav {
  padding: 10px;
}

.header_teacher {
  background-image: url(../img/header_02.png);
  height: 217px;
  margin-top: -22px;
  background-color: #038DC9;
}

.profile_picture {
  margin-top: 25px;
}

.description {
  text-align: left;
  position: absolute;
  float: none;
  margin-top: -125px;
  margin-left: 200px;
  color: #FFFFFF;
}

.attention {
  text-align: center;
}
.body_font {
	font-family: 'Lato', sans-serif;
}
.attention {
	align: left;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

<title>Teacher control panel</title>
<div class="body_font">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">
        <div class="logo">
          <img src="img/logo.png" alt="Homepage">
        </div>
      </a>
    </div>


    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Find undervisning</a>
          <li><a href="#">Om os</a>
            <li><a href="#">Blog</a>
      </ul>
      <div class="divider">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <button type="button" class="btn btn-default">Support</button>
          </li>
          <li>
            <span class="glyphicon glyphicon-envelope mail" aria-hidden="true">
                           <span class="badge danger">5</span>
            </span>
          </li>
          <li>
            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true">
          	            </span>
          </li>
        </ul>
      </div>
    </div>
  </div>



  <nav class="navbar navbar-inverse">
    <div class="container">
      <ul class="nav navbar-nav">
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">Elever</a></li>
        <li><a href="#">Kalendar</a></li>
        <li><a href="#">Undervisning</a></li>
        <li><a href="#">Beskeder</a></li>
        <li><a href="#">Min konto</a></li>
      </ul>
    </div>
  </nav>




  <div class="header_teacher">
    <div class="container">
      <div class="profile_picture">
        <img src="img/profile_picture.png">
      </div>
      <div class="description">
        <h1><strong>Mona Larsen</strong></h1>
        <p>Underviser hos musikundervisning.dk siden 1. august 2015</p>
      </div>
    </div>
  </div>
  <div class="attention" align="left">
    <p>Hej Mona, Godt at se dig igen - din næste undervisnigstime er: <a href="#"> 27. maj 2016 </a></p>
  </div>
  <div class="container">
  <div class="panel panel-default">
      <div class="panel-heading">Kommende undervisnings lektioner</div>
      <table width="80%" border="0" align="left" cellspacing="0" cellpadding="0">
        <tbody>
          <tr class="breadcrumb">
            <b><th width="15%" scope="col">Dato</th></b>
            <b><th width="15%" scope="col">Tidspunkt</th></b>
            <b><th width="15%" scope="col">Elev</th></b>
            <b><th width="35%" scope="col">Sted</th></b>
            <b><th width="20%" scope="col">Note</th></b>
          </tr>
          <tr>
            <td>13/08/16</td>
            <td>kl. 13.15</td>
            <td>Martins Dubrowski</td>
            <td>Graven 16b st. -8000 Aarhus C</td>
            <td><a href="#">Læs note</a></td>
          </tr>
          <tr>
            <td>15/03/15</td>
            <td>kl. 16.30</td>
            <td>Martins Dubrowski</td>
            <td>Graven 16b st.-8000 Aarhus C</td>
            <td>---</td>
          </tr>
          <tr>
            <td>16/12/14</td>
            <td>kl. 12.00</td>
            <td>Sonia Hald</td>
            <td>Graven</td>
            <td><a href="#">Læs note</a></td>
          </tr>
        </tbody>
      </table>
  </div>
       <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                <div class="panel panel-default">
                    <!-- Default panel contents -->
                    <div class="panel-heading">Panel heading</div>
                    <!-- List group -->
                    <ul class="list-group">
                        <li class="list-group-item">Cras justo odio</li>
                        <li class="list-group-item">Dapibus ac facilisis in</li>
                        <li class="list-group-item">Morbi leo risus</li>
                        <li class="list-group-item">Porta ac consectetur ac</li>
                        <li class="list-group-item">Vestibulum at eros</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify">zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ
                    zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzZ  </pre>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-push-12">
                        <pre class="text-justify"> AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa                 
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa
                    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAa</pre>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
                <pre class="text-justify"> 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 
                         OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB OB 

        </pre>
            </div>
        </div>
    </div>
</body>

Answer 1

我真的希望我能解决问题。

由于bootstrap的默认值，您的问题正在发生：

@media (min-width: 768px)
  .navbar-nav>li {
    float: left;
  }
}

因此，作为li的直接子项的每个.navbar-nav元素将获得float: left中等屏幕大小（最小视口宽度为768px）。

较小的分辨率不会获得此属性，并且每个li元素占用其容器宽度的100％，导致每个元素都有自己的“行”。

您可以通过简单地赋予这些元素pull-left类（引导程序的一部分）来覆盖它，这将迫使它们始终具有float: left属性。

编辑：

更具体地说，请更改此代码：

    <ul class="nav navbar-nav navbar-right">
      <li>
        <button type="button" class="btn btn-default">Support</button>
      </li>
      <li>
        <span class="glyphicon glyphicon-envelope mail" aria-hidden="true">
                       <span class="badge danger">5</span>
        </span>
      </li>
      <li>
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true">
                    </span>
      </li>
    </ul>

到此：

    <ul class="nav navbar-nav navbar-right">
      <li class="pull-left">
        <button type="button" class="btn btn-default">Support</button>
      </li>
      <li class="pull-left">
        <span class="glyphicon glyphicon-envelope mail" aria-hidden="true">
                       <span class="badge danger">5</span>
        </span>
      </li>
      <li class="pull-left">
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true">
                    </span>
      </li>
    </ul>