我正在设计一个关于HTML5，CSS3和Bootstrap的网站。
我在设置堆叠行列布局时遇到问题。在网络上，它看起来很完美，就像我想要的那样：
http://i.stack.imgur.com/lbMmT.png
问题在于，当进入响应模式时，在该图片上看到的顶行显示不好，因为它没有显示所有＆＃34;单元格＆＃34;的网格。此外，页脚堆叠在该行上而不是它下面。看看这张图片：
http://i.stack.imgur.com/45KuC.png
代码段：
/* HOME INFO
-------------------------------------------------- */
.row-home-info {
height: 300px;
background-color: #586f56;
padding: 0 !important;
}
.row-home-info .col-md-6 {
padding: 0;
margin: 0;
}
.row-home-info .home-como-llegar {
height: 100%;
background-color: #ffff00;
background-image: url('../img/como-llegar.jpg');
background-position: center;
}
.row-home-info .home-como-llegar .cover {
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.8);
text-align: center;
}
.row-home-info .home-como-llegar .cover a {
margin-top: 180px;
}
.row-home-info .home-col-contacto {
height: 100%;
background-color: #0087c3;
padding: 0;
}
.row-home-info .home-col-contacto .row {
margin: 0;
padding: 0;
}
.row-home-info .home-col-contacto .row .col-md-6, .row-home-info .home-col-contacto .row .col-md-3 {
height: 100%;
padding: 0;
}
.row-home-info .home-col-contacto a {
display: block;
width: 100%;
height: 100%;
}
.row-home-info .home-col-contacto .newsletter {
background-image: url("../img/home-socials/bg-1.png");
background-position: center;
background-repeat: no-repeat;
}
.row-home-info .home-col-contacto .twitter {
background-image: url("../img/home-socials/bg-2.png");
background-position: center;
background-repeat: no-repeat;
}
.row-home-info .home-col-contacto .facebook {
background-image: url("../img/home-socials/bg-3.png");
background-position: center;
background-repeat: no-repeat;
}
.row-home-info .home-col-contacto .youtube {
background-image: url("../img/home-socials/bg-4.png");
background-position: center;
background-repeat: no-repeat;
}
.row-home-info .home-col-contacto .instagram {
background-image: url("../img/home-socials/bg-5.png");
background-position: center;
background-repeat: no-repeat;
}
.row-home-info .home-col-contacto .contacto {
background-image: url("../img/home-socials/bg-6.png");
background-position: center;
background-repeat: no-repeat;
}
.row-home-info .home-col-contacto .youtube a {
background-image: url("../img/home-socials/YouTube.png");
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0,135,195, 0.8);
}
.row-home-info .home-col-contacto .instagram a {
background-image: url("../img/home-socials/Instagram.png");
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0,90,130, 0.8);
}
.row-home-info .home-col-contacto .twitter a {
background-image: url("../img/home-socials/Twitter.png");
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0,135,195, 0.8);
}
.row-home-info .home-col-contacto .facebook a {
background-image: url("../img/home-socials/FB.png");
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0,90,130, 0.8);
}
.row-home-info .home-col-contacto .contacto a {
background-image: url("../img/home-socials/contact.png");
background-position: center;
background-repeat: no-repeat;
background-color: rgba(0, 50, 70, 0.8);
}
/* FOOTER
*---------------------------------------------*/
.footer {
min-height: 300px;
background-color: #222222;
color: #aaaaaa;
font-family: 'MetaPro', 'sans-serif';
font-weight: 100;
padding-top: 10px;
}
.footer h4 {
text-transform: uppercase;
font-weight: 100;
color: #555555;
font-size: 100%;
}
.footer ul {
width: 80%;
list-style: none;
padding: 0;
line-height: 30px;
}
.footer li {
border-bottom: dotted 1px #555555;
padding-left:10px;
}<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<section class="container-fluid">
<div class="row row-home-info">
<div class="col-md-6 home-como-llegar">
<div class="cover"><p><a class="btn btn-lg btn-primary" href="#" role="button">Cómo llegar</a></p></div>
</div>
<div class="col-md-6 home-col-contacto container-fluid">
<div class="row" style="height: 50%">
<div class="col-md-6 newsletter"></div>
<div class="col-md-3 twitter"><a href="http://twitter.com/xxxxxx" target="_blank"></a></div>
<div class="col-md-3 facebook"><a href="http://facebook.com/xxxxx" target="_blank"></a></div>
</div>
<div class="row" style="height: 50%">
<div class="col-md-3 youtube"><a href="http://youtube.com/xxxxxxxx" target="_blank"></a></div>
<div class="col-md-3 instagram"><a href="http://instagram.com/xxxxx/" target="_blank"></a></div>
<div class="col-md-6 contacto"><a href="#" target="_blank"></a></div>
</div>
</div>
</div>
</section>
<section class="footer container-fluid">
<div class="row">
<div class="col-md-3">
<h4>xxxxxxxxxxxxxxx</h4>
<ul>
<li>Home</li>
<li>Noticias</li>
<li>Escuela</li>
<li>Torneos</li>
<li>Tarifas</li>
</ul>
</div>
<div class="col-md-3">
<h4>Sobre nosotros</h4>
<ul>
<li>El campo</li>
<li>El equipo</li>
<li>Contacto</li>
<li>Pxxxxo</li>
<li>Laxxxxxxl</li>
</ul>
</div>
<div class="col-md-3">
<h4>Donde estamos</h4>
<p>Carretera xxxxxxxxxxx</p>
<p>Tfno: agasgasgasgasg</p>
</div>
<div class="col-md-3">
<h4>Conecta con nosotros</h4>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Youtube</li>
<li>Instagram</li>
</ul>
</div>
</div>
</section>
现在实际的问题，有什么帮助解决这个问题？我知道它与主行上的固定高度相同，但我试图使用最小高度等等，并且它们都没有工作。也许这样做很容易，而且我被困住了，但经过一周的研究和尝试错误后，我找不到解决方案。
希望有人对此有所了解。
此致