javascript - 如何将不同的样式应用于 bootstrap 下拉列表(移动 View 和 pc View 时)

Question

我想设计我的 top menu 导航，其中 Language 链接的宽度仅与链接要求的一样宽(与 dropdown background 相同) ), 但是当它调整大小以适应移动设备时，下拉菜单的宽度应该是 100%，这是我得到的程度 fiddle如您所见，我无法满足这两个要求中的任何一个......

你能帮忙吗？

Answer 1

演示:http://jsbin.com/USEwuvo/1/edit

HTML 需要一些修复(因为你的品牌不见了，所以没有放入品牌):

<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
 <div class="container">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#top-nav"> <span class="sr-only">Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
  </div>
  <!-- navbar header --> 
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="top-nav">
   <ul class="nav navbar-nav navbar-right">
    <li> <a href="#" class="treneri"> Trainers </a> </li>
    <li> <a href="#" class="pasakums"> Event </a> </li>
    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tickets <b class="caret"></b></a>
     <ul class="dropdown-menu">
      <li><a href="#">Buy tickets here</a> </li>
     </ul>
    </li>
    <li class="dropdown lang"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">LAT <b class="caret"></b></a>
     <ul class="dropdown-menu language">
      <li><a href="#">RUS</a> </li>
      <li><a href="#">ENG</a> </li>
     </ul>
    </li>
   </ul>
  </div>
  <!-- /.navbar-collapse -->
 </div>  <!-- /.container -->

</nav>

然后是 CSS

.container {width:auto}

@media (min-width:768px) {
  
  .nav.navbar-nav .dropdown-menu.language  {
    min-width:0px!important;
  }

}/* end min-width for language */