Question

我希望我的导航栏中间有4个链接和一个品牌标识，每边有2个链接。我正在使用bootstrap所以我想要的是在屏幕很小的时候，然后链接在品牌下面。因此，不是2个链接，而是品牌，然后2个链接全部在一条线上，我有品牌，然后在下面的中间下一行，4个链接。但我不知道怎么做？这是我到目前为止的一个小提琴。注意：在我的笔记本电脑上，我无法将其调整为md尺寸（＆gt; 992 px）

HTML：

<div id="navbar" class="li flex-container nav">
    <a class="nav-link flex-item col-md-2 col-md-offset-1 col-sm-3" href="#">PHOTOGRAPHER</a>
    <a class="nav-link flex-item col-md-2 col-sm-3 " href="#">PORTFOLIO</a>
    <a class="hplogo-a flex-item col-md-2 col-sm-12" href=""><img id="logo" src="http://www.morushsoccer.com/_uploads/563cff4e616e743953300000/Adidas.png" alt=""></a>
    <a class="nav-link flex-item col-md-2 col-sm-3" href="#">INVESTMENT + FAQ</a>
    <a class="nav-link flex-item col-md-2 col-sm-3" href="#">BLOG</a>
</div>

CSS：

body{
  background-color: #333;
  overflow-x: hidden;
  margin:0px;

}

.nav{
 list-style-type: none;
 display: inline;
 z-index: 2;

}

.resize-anchor{
  display: inline-block;
  height: auto;
  width: 300px;
}
.hplogo-a{
  display: inline-block;
  height: auto;
  width: 200px;
  min-width: 200px;
}

a:hover{
  color:#D1946F;
  text-decoration: none;
}

a:link{
  color:#D1946F;
  text-decoration: none;
}

.navlink, .hplogo-a{
  text-align: center;
  display:inline-block;
  margin-left: 5px;
  margin-right: 5px;
}
.nav-link{
 color:white;
 text-decoration: none;
 white-space: nowrap;
 text-align: center;
 font-family: Calibri;
 font-size: 18px;
 font-style: normal;
 font-variant: normal;
 line-height: 26.4px;
 padding:0px;
 margin-top: 20px;
}
img{
  width:100%
  }
}

https://jsfiddle.net/b6ks4mfk/

Answer 1

一个简单的解决方案是在html代码中有两个徽标，每个徽标都有不同的类。然后使用媒体查询和显示属性（隐藏/初始/块等）根据屏幕大小显示或隐藏徽标。

当窗口变小时，向下移动导航栏的部分

1 个答案: