我有div,我想留下来让导航栏和其他人只是通过它。
这是我目前的工作:
<div class="holder">
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1920x1080" class="img-responsive center-block">
</div>
<div class="item">
<img src="http://placehold.it/1920x1080 " class="img-responsive center-block">
</div>
</div>
</div>
<div id="headerCaption">
<img src="{{ asset('img/CaptionBg.png') }}" id="curve" class="img-responsive center-block">
</div>
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="{{ asset('img/logo.png') }}"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-shopping-cart"></i> Cart</a></li>
<li><a href="#"><i class="fa fa-user"></i> Sign Up/Login</a></li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
<a href="#carousel">First Section</a>
</li>
<li>
<a href="#section-2">Second Section</a>
</li>
<li>
<a href="#section-3">Third Section</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link 1</a></li>
<li><a href="#">Dropdown link 2</a></li>
<li><a href="#">Dropdown link 3</a></li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>
我不知道是否可以仅使用css做什么,或者我需要什么才能坚持下去。如果可能的话,其他div也可以重复使用。我希望你明白我的意思。
答案 0 :(得分:0)
这是一个SO片段。这表明如何完成你的要求。
神奇的是 css属性 位置:固定; 。嗯,好吧,没有那么多魔法,但它确实有效。将div设置为固定位置,使用left,right,top,bottom,width和height属性为其提供实际位置和形状。就这么简单。
看看他们不同的类是如何工作的,只需将固定div上的类更改为我作为示例保护的四个类中的一个。
希望这有帮助,
添
div.fixed-top-left {
position: fixed;
top: 0;
left: 0;
width: 300px;
border: 3px solid #73AD21;
}
div.fixed-top-right {
position: fixed;
top: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
div.fixed-bottom-right {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
div.fixed-bottom-left {
position: fixed;
bottom: 0;
left: 0;
width: 300px;
border: 3px solid #73AD21;
}
<div class="fixed-top-left holder">
This is a fixed div
</div>
<div id="nav-wrapper">
<nav class="navbar navbar-inverse navbar-static-top" id="navbar-main">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="{{ asset('img/logo.png') }}"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><i class="fa fa-shopping-cart"></i> Cart</a></li>
<li><a href="#"><i class="fa fa-user"></i> Sign Up/Login</a></li>
</ul>
<!-- Nav links -->
<div class="collapse navbar-collapse navbar-right" id="navbar-collapse">
<ul class="nav navbar-nav" id="nav-section">
<li class="current active">
<a href="#carousel">First Section</a>
</li>
<li>
<a href="#section-2">Second Section</a>
</li>
<li>
<a href="#section-3">Third Section</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link 1</a></li>
<li><a href="#">Dropdown link 2</a></li>
<li><a href="#">Dropdown link 3</a></li>
</ul>
</li>
</ul>
</div><!-- End of navbar collapse -->
</div><!-- End of Container Fluid -->
</nav>
</div>