Question

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

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

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

由于

Answer 1

您只需向navbar-header {float：right;}

添加CSS样式

＆＃13;

.navbar-header {
  float: right;
}

＆＃13;

<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>

＆＃13;

关于配色方案。我不太清楚你到底意味着什么，但我会猜测。

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

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用媒体查询执行此操作。将您的img放入navbar-header并将navbar-brand类应用于该center。请参阅Docs。

*旁注：HTML5不支持<div>标记。见MDN

此标记已在HTML 4（和XHTML 1）中弃用，以支持 CSS text-align属性，可应用于<p>元素或个人@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; } }。对于居中块，请使用其他CSS属性如margin-left和margin-right并将它们设置为auto（或设置margin）到0自动）。

请参阅工作代码段。

＆＃13;

<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>

＆＃13;

sudo apt-get install g++-mingw-w64-i686
sudo apt-get install libc6-dev-i386

＆＃13;

Bootstrap响应式导航栏问题

2 个答案: