如何更改下拉菜单响应引导程序的宽度

我使用引导程序的响应式导航栏。我想改变下拉菜单的宽度，这个宽度的默认值是768px，但我想改变它的宽度。我应该怎么做，我认为我应该使用jQuery来做到这一点，使用$(windows).resize()事件。这里是引导导航栏的示例：如何更改下拉菜单响应引导程序的宽度

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <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="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav>

来源

2014-07-26 Daniel.V

你不能只使用宽度：30px;/*你想要的宽度*/ – Richa

我认为有通过使用定制这样做有两种方式。也许定制bootstrap.css文件的最快方法是使用定制器http://getbootstrap.com/customize/。在那里，您可以更改@ grid-float-breakpoint的值。我测试的值为480px（原始值为@ screen-sm，与768px相同）然后单击定制程序页面末尾的“编译和下载”按钮。这会在导航栏崩溃时更改折点。例如，在bootstrap.css文件中，以下值从

@media (min-width: 768px) { 
    .navbar-collapse { 
    width: auto; 
    border-top: 0; 
    box-shadow: none; 
    }

更改为下面的这个。以前的@media设置来自默认的bootstrap.css下载，无需自定义。

@media (min-width: 480px) { 
    .navbar-collapse { 
    width: auto; 
    border-top: 0; 
    -webkit-box-shadow: none; 
      box-shadow: none; 
    }

更改这些设置的第二种方法是使用LESS并从源代码编译相同的值。如果您决定编写自己的编译文件，则可以在引导源安装的较少目录（Bootstrap_dir/less/variables.less）处发现变量@grid-float-breakpoint位于variables.less文件。更多信息在Compiling CSS and JavaScript和Bootstrap 3 Less Workflow Tutorial

来源

2014-07-26 13:30:34 jyrkim

你可以如你所愿自己的类添加到下拉菜单和设置宽度。

来源

2014-07-26 09:54:14

我想使用bootstarp导航栏，如果我想使用我自己的类为什么我应该问问题！ !!!! –

@ Daniel.V好吧，试着像logan Sarav一样在下面建议您这样做，但我建议您使用自定义类来更改宽度，因为覆盖现有样式是不好的做法。如果你想做其他事情，只需更清楚地描述它，不要大喊大叫。 –

试试这个：

.navbar-nav > li > .dropdown-menu { width: yourwidth }

来源

2014-07-26 09:58:23

感谢您的回答，但这是行不通的!!!!! –

如何更改下拉菜单响应引导程序的宽度

回答

相关问题