Question

民间，

我试图用bootstrap构建。遵循这个基本标记：

＆＃13;

<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个拇指（作为打印）。我已经尝试了一切

我已经跪在地上寻求帮助了。有谁知道如何解决？

提前谢谢。

Answer 1

将此款式添加到您的网站

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

Answer 2

在缩略图类之前只需添加类col-md-3类，然后它将为您提供确切的结果

＆＃13;

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

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

Bootstrap 75％/ 25％，4个图像大拇指（如何解决）

3 个答案: