民间,
我试图用bootstrap构建。遵循这个基本标记:
<div class="container">
<header class="row">
</header>
<div class="row">
<div role="main" class="col-md-8">
</div>
<aside role="complementary" class="col-md-4">
</aside>
</div>
<footer class="row">
</footer>
</div>
&#13;
我创建了以下页面: http://clubedebeneficiosunilife.com.br/thumbs-promocoes-logadoTest2.php
拇指伸展的问题&#39;占用所有可用空间。我希望它显示: http://clubedebeneficiosunilife.com.br/main-col-side-bar.png
也就是说,&#39;主要&#39;笔记本电脑或台式机中的一列占据屏幕的75%和“地面”。包含侧边栏的列应占据宽度的25%。 仅限于“主要&#39;我需要显示4个拇指(作为打印)。我已经尝试了一切
我已经跪在地上寻求帮助了。有谁知道如何解决?
提前谢谢。
答案 0 :(得分:0)
将此款式添加到您的网站
.thumbnail {
display: inline-block;
margin-right: 20px;
width: 22%;
}
答案 1 :(得分:0)
在缩略图类之前只需添加类col-md-3类,然后它将为您提供确切的结果
.thumbnail {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
display: block;
line-height: 1.42857;
margin-bottom: 20px;
min-height: 165px;
padding: 4px;
transition: all 0.2s ease-in-out 0s;
}
&#13;
<div class=" col-md-3">
<a class="thumbnail" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png" alt="Teste" title="Teste">-->
</a>
</div>
&#13;
答案 2 :(得分:0)
Try This
CSS
.thumbnail{
border:0;
}
.thumbnail img{
border:1px solid gray;
}
HTML
<div class"container-fluid">
<div class="row">
<aside role="complementary" class="col-md-4">
</aside>
</div>
<!--<div role="main" class="col-md-8 thumb">-->
<div role="main" class="col-md-8 col-lg-4 thumb">
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=66">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=64">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=63">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=67">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thsnc_1853y1yw.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=66">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thnetbabys_ern9kwfl.png"
alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=64">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thLOGO
MARCA CCAA_2f0q5l9z.jpg" alt="Teste" title="Teste">-->
</a>
<a class="thumbnail col-sm-3" href="http://clubedebeneficiosunilife.com.br/detalhes-da-oferta/?idOferta=63">
<img class="img-responsive" src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">
<!--<img src="http://www.clubedebeneficiosunilife.com.br/dados_admin/arquivos/thelectrolux_esvrbxh0.png"
alt="Teste" title="Teste">-->
</a>
</div>
<!--<div class="col-lg-12 col-md-12 col-xs-12 thumb">-->
<aside role="complementary" class="col-md-4">
<div class="arrowlistmenu"> <h3 class="headerbar">Categorias</h3>
<ul> <li class="arrowlistmenu"><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=1">Academias</a></li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=2">Artigos
Esportivos</a></li> <li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=3">Automotivo</a></li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=4">Alimentação</a></li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=5">Compras</a></li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=6">Beleza</a></li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=7">Educação
e Cultura</a></li> <li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=8">Informática</a></li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=9">Lazer
e Entretenimento</a></li> <li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=10">Medicina e Saúde</a></li> <li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=11">Móveis
e Decoração</a></li> <li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=12">Serviços</a></li>
<li><a
href="http://clubedebeneficiosunilife.com.br/bemvindo/?idCat=13">Viagem
e Turismo</a></li> </ul>
</div> </aside>
<!--</div>-->
</div>
</div>