Bootstrap multiple jumbotrons
I am attempting to build a site that - my initial thought- requires 2 overlapping jumbotron - using bootstrap 3. 1 jumbotron - stretching 100% of the width - traditional grey colouring. 1 overlapping - additional jumbotron that is reduced to the 'container' size - but this will have an image background.
1st attempt - with overlapping jumbotron - this allowed responsive imaging however the sizing of the full width jumbotron then did not match the size of the overlapping image.
<div class = "jumbotron">
<div class ="jumbotron container>//image
<p>Sample text</p>
</div>
</div>
2nd way - with 1 jumbotron - however this then prevents my image being responsive:
<div class="jumbotron">
<div class="row">
<div class="col-md-8">
<div class="jumbpic">
<img src="style/images/car2.png"></div></div>
<div class="col-md-4">
<p>Sample text</p>
Is there a simple alternative to allow the full width jumbotron but allow a central image that can be responsive to screen size too?
I'm probably not completely understanding your question, but what about wrapping the jumbotron in a .well ?
This gives you a responsive image inside the jumbotron, and gives you the gray enclosing background you're looking for. Just add the .img-responsive class to your image to make it responsive, and make sure it's a big enough image to fill the screen. I added the .center-block class to center the image.
Edited to remove jumbotron padding per OP in comments
<style>
.jumbotron {
padding-top: 0;
}
</style>
<div class="well">
<div class="jumbotron">
<img src="http://placehold.it/1920x800" class="img-responsive center-block">
<p>Sample text</p>
</div>
</div>
Fiddle...
Edit: This will give you a jumbotron with a background image. Again, make sure you're using a large image...
<style>
.jumbotron {
background: url('http://p1.pichost.me/i/59/1828782.jpg');
color: white;
}
</style>
<div class="well">
<div class="jumbotron">
<div class="container">
<h1>Hello, world!</h1>
<p>Sample text</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
Fiddle...
You don't need two jumbotrons if I got you correctly. You just need to specify your image to be responsive.
<div class = "jumbotron">
<div class ="container>
<img src="your-image-source" class="img-responsive">
</div>
</div>
Read about responsive images here: http://getbootstrap.com/css/#images
链接地址: http://www.djcxy.com/p/85202.html