[英]Responsive navigation menu bootstrap
我正在進行引導項目,並且必須創建一個導航菜單, 如下所示 :
我為它使用了絕對位置,但是當我將其縮放到較小的分辨率時它沒有響應(當我按比例縮小時它變得太小)。 有什么方法可以制作響應式導航菜單(如上圖所示)?
這是我的資料來源:
<div id ="top" class="container">
<div class="top-menu row">
<ul class="top-menu-buttons col-lg-12 col-xs-12">
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-active">
<img class="img-responsive" src="img/home-bt-enable.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/deal-bt.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/about-bt.png">
</a>
</li>
<li class="col-lg-3 col-xs-3">
<a href="#" class="top-menu-button menu-bt-inactive">
<img class="img-responsive" src="img/contact-bt.png">
</a>
</li>
</ul>
</div>
</div>
CSS:
.top-menu ul,
.top-menu li{
display: inline-block;
}
.top-menu{
padding-left: 170px;
padding-right: 170px;
padding-bottom: 0;
bottom: 0;
top:auto;
}
.top-menu-button{
display: inline-block;
position: absolute;
width: 100%;
}
.menu-bt-active{
top: 22px;
}
.menu-bt-inactive{
top: 37px;
}
<div class="nav navbar-default navbar-static-top">
<div class="container-fluid">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeadCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand collapse navbar-collapse navHeadCollapse">
<a href="#">
<img id="img_navbar" src="img/home-bt-enable.png">
</a>
<a href="#">
<img id="img_navbar" src="img/deal-bt.png">
</a>
<a href="#">
<img id="img_navbar" src="img/about-bt.png">
</a>
<a href="#">
<img id="img_navbar" src="img/contact-bt.png">
</a>
<div id="search"class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
試試這個CSS
#img_navbar
{
margin-left: 3%;
float: left;
margin-bottom: 10;
width:3%;
height:3%;
}
#search
{
width:20%;float:right;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.