html5 - bootstrap如何让div悬浮在栅格上面
本文介绍了html5 - bootstrap如何让div悬浮在栅格上面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
如何把1导航栏的黄色框里（查看更多）悬浮在绿色上面，如下图2导航栏一样与其它导航在同一列上，
注：导航1与导航2都采用了Bootstrap栅格，导航栏1采用12格，查看更多没有给格，导航栏2的导航给的10格，查看更多给2格，能否不调格的情况下实现悬浮上去，且在小屏幕也样的效果，导航在小屏幕是可以左右滑动的。
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Modernizr -->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<!-- Respond.js for IE 8 or less only -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/vendor/respond.min.js"></script>
<![endif]-->
<style>
.loadMeinv {
height: 30px;
width: 90PX;
line-height: 30px;
color: #999;
text-align: center;
background: #f7f7f7;
display: block;
text-decoration: none;
margin: auto 10px;
margin-bottom: 15px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.ul-wapper {
overflow: hidden;
}
.ul-wapper>.nav-tabs {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 50px;
margin-bottom: -50px;
}
.ul-wapper>.nav-tabs>li {
list-style: none;
display: inline-block;
}
.nav-tabs>li {
float: none;
margin-bottom: -1px;
}
.ul-wapper>.nav-tabs>li>a {
font-size: 14px;
color: #7c7c7c;
}
.ul-wapper>.nav-tabs>li>a:hover {
border-color: transparent;
background-color: transparent;
color: #7c7c7c;
}
.ul-wapper>.nav-tabs>li.active {}
.ul-wapper>.nav-tabs>li.active>a {
background-color: #DDD;
border: 0;
}
#products>.container>.tab-content {
padding: 20px 0;
}
.nav-tabs {
border-bottom: 0px solid #ddd;
}
.nav-tabs>li>a {
position: relative;
display: block;
padding: 5px 10px;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 2px 2px 0 0;
}
</style>
</head>
<body>
<!--[if lte IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header role="banner">
<nav role="navigation" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container -->
</nav>
</header>
<br>
<br>
<br>
<br>
<br>
<section id="impact">
<div class="container">
<div class="ul-wapper">
<ul class="nav nav-tabs col-sm-12" role="tablist">
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
</ul>
<div class="pull-right loadMeinv">
<a href="#" style="color: #7c7c7c;">查看更多</a>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="ul-wapper row margin-a">
<ul class="nav nav-tabs col-sm-10" role="tablist">
<li class="active"><a href="#home" >Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
<li><a href="#home">Dropdown</a></li>
</ul>
<div class=" col-sm-2 pull-right hidden-xs loadMeinv">
<a href="#" style="color: #7c7c7c;">查看更多</a>
</div>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')
</script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
var _gaq = [
['_setAccount', 'UA-XXXXX-X'],
['_trackPageview']
];
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.src = ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js';
s.parentNode.insertBefore(g, s)
}(document, 'script'));
</script>
</body>
</html>
解决方案
.ul-wapper {
/* overflow: hidden; */去掉这个overflow
position: relative;
}
.loadMeinv {
position: absolute;
top: 0;
right: 0;
}这篇关于html5 - bootstrap如何让div悬浮在栅格上面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
