3

Estou a usar o bootstrap e o meu objectivo é tornar fluido umas caixas que estão agrupadas em linhas de 4. Quando altero o tamanho do ecrã pretendo que as caixas diminuam ( consegui) mas ao atingir um determinado ponto, pretendo que elas alinhem de 2 em 2 e finalmente uma em cada linha. O problema é que elas passam logo para uma em cada linha ficando mal no ecrã. Pretendo algo como existe neste site: http://www.ticketbis.com.pt/

o meu código html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Bootstrap for Web Design</title>
    <meta name="description" content="A Tuts+ course">

    <!-- Mobile Specific Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <!-- Custom CSS -->
    <link rel="stylesheet" type="text/css" href="css/custom.css">

  </head>
  <body>

<div class="container-fluid">
<div class="content">
<div class="row">
<div class="col-md-3">
<div class="events-box"><img src="images/evento1.jpg"/>
<div class="events-cost">Gratuito</div>
<div class="events-name">DJ Precatado Tour Smart 2015</div>
<div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Música</div>
<div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Meo Arena</div>
<div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
<div class="events-action">
<button type="button" class="btn btn-success btn-sm">Inscrever-se</button></div>

</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento2.jpg"/>
<div class="events-cost">20.00€ - 45.00€</div>
<div class="events-name">Vinil e K7. Que futuro?</div>
<div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Conferências</div>
<div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Armazém 77</div>
<div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
<!--<div class="events-action">
<button type="button" class="btn btn-success btn-sm">Comprar</button></div>-->

</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento3.jpg"/>
<div class="events-cost">Gratuito</div>
<div class="events-name">Como fazer massa italiana em português</div>
<div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
<div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Restaurante Pasta e pinhões</div>
<div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>

</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento4.jpg"/>
<div class="events-cost">2.500€</div>
<div class="events-name">Windows 28 - Como entrar?</div>
<div class="events-cat"><span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> Aulas e Workshops</div>
<div class="events-place"><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Chalet suiço Bill Gates</div>
<div class="events-date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 12 Dez 2015, 21:30</div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-3">
<div class="events-box"><img src="images/evento1.jpg"/>
<div class="categoria">A1</div>
<div class="events-name">DJ Smart Prec Tour 2015</div>
</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento2.jpg"/>
<div class="categoria">B1</div>
</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento3.jpg"/>
<div class="categoria">C1</div>
</div>
</div>

<div class="col-md-3">
<div class="events-box"><img src="images/evento4.jpg"/>
<div class="categoria">D1</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->


    <!-- Latest compiled and minified JavaScript -->
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>  

</body>
</html>

Os meus css:

h1{
    font-size:40px;
    color:#FFF;
    background-color: #52b266;
    }

.blue-title{    
    font-size:35px;
    color:#333c4e;
    }

.blue-sub-title,
.white-sub-title {
    font-size:22px;
    font-weight:bold;
}

.blue-sub-title{
    color:#333c4e;
    }

.white-sub-title{
    color:#fff;
    }   

.main-title{
    max-width:1130px;
    margin: 0 auto;
    text-align:left;
    margin-top:10px;
    margin-bottom:10px;
    }

.main-box{
    background:#e6f0f3;
    width:100%;
    height:100px;
    left:0;
    margin:0px;
    padding:10px;
    text-align:center;
    }


.content{
    max-width:1130px;
    margin:0 auto;

    }

.events-box{
    background:#fff;
    border: 1px solid #CCC;
    max-width:300px;
    height:100%;
    margin:0 auto;
    margin-bottom:20px;
    box-shadow: 0px 0px 8px #888888;
    padding:20px;

    }

 a:hover {
    text-decoration:none;
    }

.events-box img {
    max-width:100%;
    height:auto;

}

.events-cost{
    color:#00a651;
    background:white;
    opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
    font-size:15px;
    text-transform:uppercase;
    margin-top:-20px;
    text-align:center;
    max-width:100%;

    }

.events-name{
    font-size:20px;
    font-weight:bold;
    text-align:left;
    margin-top:10px;
    }

.events-place{
    font-size:14px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#ACACAC;
    }

.events-date{
    font-size:14px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#ACACAC;
    }   


.events-cat{
    font-size:18px;
    text-align:left;
    padding-left:5px;
    margin-top:5px;
    color:#666;
    }   

.events-action{
    max-width:100%;
    text-align:right;
    margin: 0 auto;
    margin-top:5px;



    }


/*
img {
    max-width: 100%;
    width: auto\9;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.featured-events-list li {
    list-style: none;
    width: 100%;
    font-size: 1.5em;
    margin: .5%;
    float: left;
    position: relative;
    margin-bottom: 20px;
    line-height: normal;
    min-height: 250px;
    width: 24% \9;
}

*/

@media screen and (max-width: 400px) {
    .blue-sub-title {
        font-size:14px;
    }

h1{
    font-size:20px;
    color:#FFF;
    background-color: #52b266;
    }

.white-sub-title{
    display:none;

    }

.events-box{
    width:100%;
    height:auto;
    }

.events-box img {
    max-width:100%;
}

.events-cost{
    max-width:100%;

    }

}

Obrigado.

2 Respostas 2

2

Você deve trabalhar com as classes col-x-y do bootstrap.

Por exemplo, se você deseja que eles se comportem diferente em diferentes resoluções faça assim:

<div class="col-sx-6 col-sm-4 col-md-3 col-lg-3">

E coloque tudo em uma única class='row'

Mais informações http://getbootstrap.com/css/#grid

1
  • Sim, é isso mesmo, @ErickGallani. Muito obrigado. 17/09/2015 às 11:29
2

É o seguinte Paulo:

Se você quer 3 caixas numa tela maior, você usará a classe: col-md-4 Como o grid é de 12 colunas você conseguirá 3 caixas em uma linha.

Para mudar para duas caixas numa resolução menor, você deve usar a classe: col-sm-6 Com o grid de 12 colunas você conseguirá então posicionar 2 caixas.

Para uma caixa por coluna em telas menores ainda (celulares por exemplo) você deve usar a classe: col-xs-12 Com isso indicando que você quer ocupar as 12 colunas do grid e portanto uma caixa por linha.

Você pode entender melhor isso no seguinte link: http://getbootstrap.com/css/ Navegando até a seção "grid options".

Espero ter ajudado.

Boa sorte!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .