Bootstrap h1 top-margin on small screens
Question
I am using Bootstrap 3.3.2 with this code
<div class="container">
<div class="row" style="background:red;">
<div class="col-md-12">
first container
</div>
</div>
<div class="row" style="background:yellow;">
<div class="col-md-12" style="background:blue;">
<h1>seconds container with h1</h1>
</div>
</div>
</div>
But on smaller screens <1280px, I get the yellow part, which makes a margin to the h1 tag, I don't want.
The result can be seen here:
What can I do to remove the yellow part (margin before h1 on smaller screens)?
2 answers
solution1
0 ACCPTED 2015-02-01 17:29:01
The problem is that on small resolutions col-md-12 class is not triggered (it's for "medium" resolutions) so float: left and width: 100% styles are not applied causing the gap you are observing.
To solve the issue you can use col-xs-12 classes instead:
<div class="container">
<div class="row" style="background:red;">
<div class="col-xs-12">
first container
</div>
</div>
<div class="row" style="background:yellow;">
<div class="col-xs-12" style="background:blue;">
<h1>seconds container with h1</h1>
</div>
</div>
</div>
Demo: http://plnkr.co/edit/jTwSD7Kx1T4hXwdJy0wF?p=preview
solution2
0 2015-02-01 17:36:31
Hope it will help you.you can use media queries
<!DOCTYPE html> <html> <head> <link data-require="bootstrap@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> <script data-require="bootstrap@3.3.1" data-semver="3.3.1" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src="script.js"></script> <style> @media(max-width:767px){ .removeh1margin h1{margin:0;} } @media(min-width:768px){ .removeh1margin h1{margin:0;} } @media(min-width:992px){ .removeh1margin h1{margin:0;} } @media(min-width:1200px){ .removeh1margin h1{margin:0;} } </style> </head> <body> <div class="container"> <div class="row" style="background:red;"> <div class="col-md-12"> first container </div> </div> <div class="row removeh1margin" style="background:yellow;"> <div class="col-md-12" style="background:blue;"> <h1>seconds container with h1</h1> </div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.