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

时间:2017-10-24 03:42:03

标签: html css twitter-bootstrap twitter-bootstrap-3

我希望我的导航栏中间有4个链接和一个品牌标识,每边有2个链接。我正在使用bootstrap所以我想要的是在屏幕很小的时候,然后链接在品牌下面。因此,不是2个链接,而是品牌,然后2个链接全部在一条线上,我有品牌,然后在下面的中间下一行,4个链接。但我不知道怎么做?这是我到目前为止的一个小提琴。注意:在我的笔记本电脑上,我无法将其调整为md尺寸(> 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/

1 个答案:

答案 0 :(得分:0)

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