我将这个设计为自学项目，但现在有两个问题。
首先是提交按钮下的三张照片。我希望它们只显示在那个蓝色背景容器中，所以我连续制作了三列长度为4（col-md-4）的列。它们在中型和大型设备中都能很好地显示，但问题是当在小型设备或超小型设备中查看页面时，它们都会出错。即使我尝试使用jQuery将蓝色容器的最小高度设置为屏幕大小，它们也会离开那个蓝色容器div，因此蓝色容器高度会随着内容自动增加，但不会增加。然后我试图反击这个使所有列col-xs-4像这样：
http://shahsaad.base.pk/index2.html
但在平板电脑或移动设备上观看时，它们看起来太小了。
第二个问题是，当我连续添加这三个图像时，页面右侧的所有右侧都会出现一个小的白色间隙，位于导航栏下方。
我一直试图解决这个问题一个小时，但仍然无法弄清楚如何正确地做到这一点。请帮忙。
这是我的代码：
CSS
<style>
.navbar-brand {
font-size:1.7em;
}
#topContainer {
background-image:url("background.jpg");
height:800px;
width:100%;
background-size:cover;
}
#topRow{
margin-top:100px;
text-align:center;
color:black;
}
#topRow h1{
font-size:300%;
}
.roundDiv{
border-radius:10px;
background-color: #ffffff;
opacity:0.5;
color:black;
}
.marginTop{
margin-top:30px;
}
.centerDiv{
text-align:center;
}
.title {
margin-top:100px;
text-size:300%
}
a:hover {
text-decoration:none;
}
.col-md-4{
text-align:justify;
}
#footer {
background-color:#000000;
height:40px;
width:100%;
text-align:center;
color:#3777A0;
}
</style>
体
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="" class="navbar-brand">Soon Valley</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#index.html" class="active">Home</a><li>
<li><a href="">Photos</a><li>
<li><a href="">Videos</a><li>
<li><a href="">Notes</a><li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="email" placeholder="Email" class="form-control"/>
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control"/>
</div>
<button type="submit" class="btn btn-success">Sign in</button>
<form>
</div>
</div>
</div>
<div class="container contentContainer" id="topContainer">
<div class="row">
<div class="col-md-6 col-md-offset-3" id="topRow">
<h1 class="marginTop"><b>Soon Valley</b></h1>
<p class="lead">One of the most beautiful valleys of Pakistan</p>
<h3 class="marginTop"><b>Interested? Join our mailing list.</b></h3>
<form class="marginTop">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="email" class="form-control" placeholder="Your email address"/>
</div>
<input type="submit" class="btn btn-success btn-lg marginTop" />
</form>
</div>
<div class="row">
<div class="col-md-4 text-center marginTop">
<img src="pic.jpg" class="img-responsive img-circle"/>
</div>
<div class="col-md-4 text-center marginTop">
<img src="daip.jpg" class="img-responsive img-circle"/>
</div>
<div class="col-md-4 text-center marginTop">
<img src="jahlar.jpg" class="img-responsive img-circle"/>
</div>
</div>
</div>
</div>
<div class="container contentContainer">
<!--
<div class="row" class="centerDiv">
<h1 class="centerDiv title"><b>Our Photo Gallery</b></h1>
</div>
!-->
<div class="row">
<div class="col-md-4">
<a href="">
<h2><span class="glyphicon glyphicon-picture"></span> Photo Gallery</h2>
</a>
<p>A brief Description of the photo Gallery, And some more details just to fill this space
you know.A brief Description of the photo Gallery, And some more details just to fill this space
you know.</p>
</div>
<div class="col-md-4">
<a href="">
<h2><span class="glyphicon glyphicon-facetime-video"></span> Videos</h2>
</a>
<p>A brief Description of the photo Gallery, And some more details just to fill this space
you know.A brief Description of the photo Gallery, And some more details just to fill this space
you know.</p>
</div>
<div class="col-md-4">
<a href="">
<h2><span class="glyphicon glyphicon-list-alt"></span> Notes</h2>
</a>
<p>A brief Description of the photo Gallery, And some more details just to fill this space
you know.A brief Description of the photo Gallery, And some more details just to fill this space
you know.</p>
</div>
</div>
</div>
</div>
<div class="container" id="footer">
</p>Designed by: <a href="http://www.facebook.com/shahsaad"><b>Shah Saad Hamadani</b></a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
$(".contentContainer").css("min-height",$(window).height());
</script>