桌面上的Bootstrap菜单错误

Question

当我从移动版本中移除clear时，桌面版本上的导航看起来很好。但是当我这样做时，移动版本上的折叠菜单会被窃听。然而，我似乎无法在媒体查询中将我的清除设置为默认值。我试过浮动和位置：相对但似乎没有什么可以让我的品牌和我的导航在同一条线上。

@media only screen and(min-width:786px){
.custom-navbar .navbar-collapse {
    clear:none;
}

编辑：这是一个最小的工作＆＃39;例如：Codepen

Answer 1

您需要重新构建HTML。你有你的SVG代替一个按钮，它应该放在切换按钮内，然后在导航栏标题内，而不是之后。此外，navbar-right属于ul，而不属于navbar-collpase。

请参阅Docs和正在使用的代码段。

body {
  font-size: 62.5%;
}
.navbar.custom-navbar .navbar-nav li a {
  font-family: 'Open Sans', sans-serif;
  color: #DFBA68;
  font-size: 1rem;
}
.navbar.custom-navbar {
  background-color: #252626;
}
.navbar.custom-navbar .navbar-brand {
  font-family: 'sharpie';
  color: #DFBA68;
}
.navbar.custom-navbar .navbar-brand:hover {
  color: #DFBA68;
}
.navbar.custom-navbar .navbar-toggle {
  z-index: 1;
  padding: 0;
  margin-top: 10px;
  margin-left: 15px;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top custom-navbar" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
        <svg height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
          <path d="M0,40C0,40,100,40,100,40C100,40,100,60,100,60C100,60,0,60,0,60" fill="#f7f4ea"></path>
          <path d="M0,20C0,20,100,20,100,20M100,80C100,80,0,80,0,80" stroke="#dfba68" style="stroke-width: 4px;"></path>
        </svg>
      </button> <a class="navbar-brand" rel="home" title="Help">Hannelore Goovaerts.be</a>

    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#about">ABOUT</a>

        </li>
        <li><a href="#portfolio">PORTFOLIO</a>

        </li>
        <li><a href="#contact">CONTACT</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

从String json = "{\"info\": {" +"\"lat\": " + locationGet.getLat() + ", " + "\"lon\": " + locationGet.getLon() + "} }"; 移除clear:both。 .custom-navbar .navbar-collapse强制元素在clear:both;或float:right;的元素之后为Codepen。

https://api.jquery.com/jquery.get/

float:left;