我想知道如何使用bootstrap消除header1
和幻灯片之间的差距。以上"欢迎来到我们的服务"这是我试图移动的差距。
Preview of the gap which I'm trying to remove
高于和低于差距的HTML
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<div class="page-header">
<h1 class="header1">WELCOME TO OUR SERVICE</h1>
</div>
<p class="para1">Merton Home Tutoring Service is for adults who want to learn English and volunteer tutors who want to teach it. Our service is specifically for people who cannot get to classes for various reasons. By providing people with the chance to learn English, Merton Home Tutoring Service hopes to enable them to communicate fully with others and to encourage their participation in local and national activities. It is hoped that, after a time, most learners will be able to go to formal classes of English language in a college, where they will be able to follow a course leading to qualifications. One to one lessons in the home from a friendly tutor or in small classes mean that people gain self confidence in the English for every day life in England. Learners usually want to communicate better with teachers, doctors, health visitors and others. They may want social English, so they can chat to neighbours or make new friends from different communities. They may want to gain confidence after a period at home, aim for employment or a qualification. Tutors with their local knowledge can signpost the way to information and to formal education. With improved English, learners can go on to discover information for themselves, access services independently and meet people from different communities. All want to support themselves and their families. They become more able to help themselves and their families understand, adapt and participate in life in the UK. English is the key to that participation. One-to-one or small class teaching mean that individual needs and wishes of learners can be addressed, and specialised classes developed.</p>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p class="text-center">pam.treanor@mhts.org.uk | Telephone number: 07580 765 118 | Registered charity number: 1139126 </p>
</div>
</div>
答案 0 :(得分:0)
删除margin-bottom。
.carousel {
height: 400px;
/* margin-bottom: 60px; */
}