Question

我无法保持导航栏的响应能力。当浏览器达到一定大小时，高度将增加。我做了一个小提示来展示正在发生的事情，如果你展开预览，导航栏将是正常的。

  .navbar {
    background-color: #204489;
    box-shadow: 0 4px 8px rgba(0,0,0,.25);
    float: center;
  }
  .navbar a {
    color: #fff;
  }

  .navbar-brand img  {
    margin-left: auto;
    margin-right: auto;
    height: 25px;
  }
  .navbar-brand {
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
      float: none !important;
  }

  <nav class='navbar navbar-fixed-top'>
    <div class='container'>
      <div class='navbar-header'>
        <button aria-controls='navbar' aria-expanded='false' class='navbar-toggle collapsed' data-target='#navbar' data-toggle='collapse' type='button'>
          <span class='sr-only'>Toggle navigation</span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </button>
      </div>
      <div class='navbar-brand'>
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=271&h=25" />
      </div>
    </div>
  </nav>

Answer 1

删除navbar-header类，因为它旨在启用移动设备上的折叠菜单;这就是导航栏扩展的原因。

请参阅示例代码段。

.navbar.navbar-custom {
  background-color: #204489;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .25);
  float: center;
}
.navbar.navbar-custom a {
  color: #fff;
}
.navbar.navbar-custom .navbar-brand {
  margin-left: auto;
  margin-right: auto;
  display: block;
  float: none;
}
.navbar.navbar-custom .navbar-brand img {
  margin-left: auto;
  margin-right: auto;
  height: 25px;
  margin-top: -2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class='navbar navbar-custom navbar-fixed-top'>
  <div class='container'>
    <div class='navbar-brand'>
      <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=271&h=25" />
    </div>
  </div>
</nav>

Answer 2

试试这个... select distinct component as cmp ,project_id, (select count(severity) from issue_lines where severity = 'MINOR' AND component = cmp) as minor, (select count(severity) from issue_lines where severity = 'MAJOR' AND component = cmp) as major, (select count(severity) from issue_lines where severity = 'CRITICAL' AND component = cmp) as critical, (select count(severity) from issue_lines where severity = 'INFO' AND component = cmp) as info, (select count(severity) from issue_lines where severity = 'BLOCKER' AND component = cmp ) as blocker from issue_lines需要在navbar-brand中，navbar-header需要navbar-brand或inline。

inline-block

.navbar {
    background-color: #204489;
    box-shadow: 0 4px 8px rgba(0,0,0,.25);
    float: center;
}
.navbar a {
    color: #fff;
}

.navbar-brand img  {
    margin-left: auto;
    margin-right: auto;
    height: 25px;
}
.navbar-brand {
      margin-left: auto !important;
      margin-right: auto !important;
      display: block !important;
      float: none !important;
}

响应式bootstrap导航与品牌

2 个答案: