我正在学习Bootstrap 3并且有一个我正在处理的简单页面，它只包含一个顶部导航栏，旋转木马和页脚。
该页面在桌面大小上看起来不错。当它缩小到移动尺寸时，我有太多的空白区域。如果我必须添加更多内容来填充它，我会有一个替代方法，以避免这样做。我只喜欢旋转木马的简单性。
有没有办法让我的手机看起来很漂亮？
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<!-- Fixed navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <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="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">About</a>
</li>
<li><a href="#">Contact</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<br />
<!-- Begin page content -->
<div class="row clearfix">
<div class="col-xs-12 column">
<div class="carousel slide" id="carousel-491568">
<!-- <ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-491568">
</li>
<li data-slide-to="1" data-target="#carousel-491568">
</li>
<li data-slide-to="2" data-target="#carousel-491568">
</li>
</ol> -->
<div class="carousel-inner">
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!--<div class="carousel-caption">
<h2>NEW Client!</h2>
<p></p>
</div> --></div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p></p>
</div> --></div>
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p> </p>
</div> --></div>
</div> <a class="left carousel-control" href="#carousel-491568" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-491568" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<div id="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<!--<p class="footer-block">Footer</p> -->
<p><a href="#"><i class="fa fa-envelope fa-1x"> Questions?</i></a> | <i class="fa fa-mobile fa-1x"> (740) 564-9876</i>
</p>
<p>Copy Here</p>
</div>
<div class="navbar-text pull-right"> <a class="btn btn-social-icon btn-facebook" href="#" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="#" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="#" target="_blank">
<i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分：1)
我建议使用背景图片修改经典的carousel html脚本，并相应调整css文件的大小。
在这里你会找到一个html示例：
<div class="container">
<!-- Header Carousel -->
<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>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
和你的css示例代码：
/* CSS used here will be applied after bootstrap.css */
/* -------carousel slides----*/
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-indicators li {
border-color: #C0C0C0;
}
.carousel-indicators .active {
background-color: #c0c0c0;
}
.carousel-inner {
margin-bottom:50px;
}
.carousel .item{
height: 400px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 400px;
}
.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}