Bootstrap 响应式导航栏问题

Question

我有 this code 用于引导响应导航栏。在桌面视图中，徽标位于顶部，这很好，但在移动视图中，我希望徽标与展开按钮内嵌。我该怎么做呢？

PS：在 jsfiddle 中调整预览窗口的大小以查看响应格式。移动视图中的展开按钮在 jsfiddle 中也不起作用。

另外，如何使用 css 更改导航栏上的配色方案？

谢谢

Answer 1

您可以使用媒体查询来执行此操作。将您的 img 放入 navbar-header 并对其应用 navbar-brand 类。见Docs。

*旁注：HTML5 不支持center 标签。见MDN

该标签在 HTML 4（和 XHTML 1）中已被弃用，取而代之的是 CSS text-align 属性，可应用于<div> 元素或 给个人<p>。对于居中块，使用其他 CSS 属性 像 margin-left 和 margin-right 并将它们设置为自动（或设置边距 为 0 自动）。

查看工作片段。

@media (min-width: 768px) {
  .navbar .navbar-brand {
    float: none;
  }
  .navbar .navbar-brand img {
    width: 50%;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  .navbar .navbar-brand {
    padding-top: 6px;
  }
  .navbar .navbar-brand img {
    width: 150px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#">
        <img src="http://codingkids.businesscatalyst.com/logo.png" alt="Coding Kids">
      </a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="/">Products<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Silver</a>
            </li>
            <li><a href="#">Silver+</a>
            </li>
            <li><a href="#">Gold</a>
            </li>
            <li><a href="#">Gold+</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

你所要做的就是添加一个 CSS 样式到 navbar-header{ float: right;}

.navbar-header {
  float: right;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
      </button>
    </div>
    <center>
      <p id="LOGO">
        <img src="http://codingkids.businesscatalyst.com/logo.png" width="50%" alt="Coding Kids">
      </p>
    </center>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="/">Products<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Silver</a>
            </li>
            <li><a href="#">Silver+</a>
            </li>
            <li><a href="#">Gold</a>
            </li>
            <li><a href="#">Gold+</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Contact</a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
        </li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

关于配色方案。我不太确定你的确切意思，但我猜一下。

我假设您只想更改内容的背景颜色。

在这里你可以添加更多的 CSS 样式来改变颜色。

.navbar {
  background-color: red;
  border: 1px solid white;
}