0
我正在设计一个关于HTML5，CSS3和Bootstrap的网站。Bootstrap堆叠行不响应
我在设置堆栈行列布局时遇到了问题。在网络上，它看起来完美的，因为我想，这样的事情：
http://i.stack.imgur.com/lbMmT.png
的问题是，进入响应状态时，看到的是PIC最上面一行是显示坏，因为它不显示网格中的所有“单元格”。此外，页脚堆叠在该行而不是其下。检查这样的画面：
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">
\t <div class="row row-home-info">
\t \t <div class="col-md-6 home-como-llegar">
\t \t \t <div class="cover"><p><a class="btn btn-lg btn-primary" href="#" role="button">Cómo llegar</a></p></div>
\t \t </div>
\t \t <div class="col-md-6 home-col-contacto container-fluid">
\t \t \t <div class="row" style="height: 50%">
\t \t \t \t <div class="col-md-6 newsletter"></div>
\t \t \t \t <div class="col-md-3 twitter"><a href="http://twitter.com/xxxxxx" target="_blank"></a></div>
\t \t \t \t <div class="col-md-3 facebook"><a href="http://facebook.com/xxxxx" target="_blank"></a></div>
\t \t \t </div>
\t \t \t <div class="row" style="height: 50%">
\t \t \t \t <div class="col-md-3 youtube"><a href="http://youtube.com/xxxxxxxx" target="_blank"></a></div>
\t \t \t \t <div class="col-md-3 instagram"><a href="http://instagram.com/xxxxx/" target="_blank"></a></div>
\t \t \t \t <div class="col-md-6 contacto"><a href="#" target="_blank"></a></div>
\t \t \t </div>
\t \t </div>
\t </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>现在的实际问题，对thow任何帮助解决这一问题？我知道它与主行上的固定高度一样，但我试图使用最小高度等，一个也不工作。也许是很容易做的事情，我卡住了，但经过一周的研究和尝试错误，我找不到解决方案。
希望有人对此有所了解。
问候，
谢谢。这解决了问题。我已经尝试过，但我错过了一些东西。 我不得不将固定高度添加到.row-home-info .home-col-contacto将其设置为150px，因为我没有内容a（它们只是具有背景图像的块） 最后我有： '.row-home-info .home-col-contacto a { display：block; 宽度：100％; 身高：150px！重要; }' And： '.row-home-info .home-col-contacto .newsletter { background：[...]; 身高：150px！重要; }' 再次感谢您的回答@ GL.awog –