html - Fixed bootstrap row over another row -
i want create row @ top of page, , row hovering previous one. idea create 2 columns in first row - col-md-3
, col-md-9
, , second row apply image between two, row has col-md-2
, col-md-2
(image between), col-md-8
. should this:
i managed create it, box between still not fixed:
<div class="container-fluid"> <div style="position: absolute; width: 100%;"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-2" style="text-align: center; z-index: 9999;"> <div style="background-color: red;"> # adding position: fixed here works breaks box width <img src="/assets/image/logo.jpg"> <br> </div> </div> <div class="col-md-8"></div> </div> </div> <div class="row" style="height: 100%;"> <div class="col-md-3" style="position: relative;"> <div> <img src="/assets/image/leftimage.jpg"> </div> </div> <div class="col-md-1"></div> <div class="col-md-8"> lorem ipsum... </div> </div> </div>
how can that?
you dont have use bootstrap, can use css:
div.container { width:100%; position:fixed; background-color:red; height:100px; } div.img { margin:auto; width:80%; padding:5px; text-align:center; }
if check fiddle can understand better.
Comments
Post a Comment