Bootstrap 75% / 25% with 4 image thumbs (如何解决)答案

【问题标题】：Bootstrap 75% / 25% with 4 image thumbs (how to resolve)Bootstrap 75% / 25% with 4 image thumbs (如何解决)
【发布时间】：2016-09-27 12:52:04
【问题描述】：

伙计们，

我正在尝试使用引导程序进行构建。遵循这个基本标记：

<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>

我创建了以下页面： http://clubedebeneficiosunilife.com.br/thumbs-promocoes-logadoTest2.php

拇指被“拉伸”占据所有可用空间的问题。我希望它是这样显示的： http://clubedebeneficiosunilife.com.br/main-col-side-bar.png

也就是说，笔记本或台式机中的“主”列占屏幕的 75%，包含侧边栏的“terras”列应占宽度的 25%。仅在“主要”列中，我需要显示 4 个拇指（作为打印）。我什么都试过了

我已经跪下寻求帮助。有人知道怎么解决吗？

提前谢谢你。

【问题讨论】：

这是您要找的吗？ <div role="main" class="col-md-8 col-lg-4 thumb"> 编辑：抱歉，Chrome 复制了错误的东西。
马特，我按照你的建议改了。不工作！我想在他们之后的右侧有 4 个拇指和侧边栏。更改后的样子:: clubedebeneficiosunilife.com.br/…
哦！对不起！我误读了你想要的内容！让我知道 Dhaarani 的答案是否有效，或者我可以推荐一个修复程序来获得你想要的。旁注：在测试其他人之前，请务必撤消您在我的评论中所做的更改。
我已经完成了firebug，并且使用firebug进行了一些修改，我得到了你的要求，只需添加我的代码

标签： css twitter-bootstrap responsive-design row

【解决方案1】：

在缩略图类之前只需添加类 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;
}

<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>

【讨论】：

【解决方案2】：

将此样式添加到您的网站

.thumbnail {
   display: inline-block;
   margin-right: 20px;
   width: 22%;
 }

【讨论】：

【解决方案3】：

        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>

【讨论】：