导航栏高度的增加，当介质宽度

Question

我有一个非常简单的导航栏：

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header pull-left"> 
      @Html.ActionLink("Contacts", "Contacts", "Home", null, null, null, new { area = "" }, new { @class = "navbar-brand customclass" }) 
      @Html.ActionLink("Home", "Index", "Home", null, null, "anchor", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 

     <div class="navbar-header pull-right"> 
      <ul class="nav navbar-nav pull-left"> 
       <li style="padding-right:20px"><button type="button" class="btn btn-success navbar-btn" data-toggle="modal" data-target="#register"><span class="glyphicon glyphicon-ok"></span>text</button></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

所以，当我的屏幕低于768导航栏高度从51变为66和导航栏并不十分好看了（如按钮被取代，以便它保持在中心，但链接不），所以我明白我基本上必须用各种媒体查询覆盖这个，但我不明白如何。我试着将高度设置为51，并且它的dkinda工作（仅适用于导航栏高度，按钮稍微偏移，尝试与导航栏的中心对齐，好像它是66px，或者可能会应用填充\ margin），但我无法找到所述填充\余量）。

所有的类都是未修改的引导程序，我只应用我自己的类来创建第一个链接（在导航栏中）一张图片。

Answer 1

设置导航栏高度不是正确的方法。它扩大，因为菜单列表上应用保证金：

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

可以覆盖像这样：

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

Fiddle

不需要任何媒体查询，因为这适用于最小断点。 Bootstrap CSS应用于“移动第一”。