1

As colunas do Bootstrap que ficam dentro da div com a classe .row ficam coladas ( http://prntscr.com/io5hbg ). Porém eu gostaria de "desgrudar" elas de alguma forma, colocando um espaçamento entre elas de pelo menos de 20px.

Já tentei com css ( usando margin na class da coluna: http://prntscr.com/io5kyk ), já tentei usar mais div.row em tudo mas não resolveu.

Exemplo de como fica grudado:

inserir a descrição da imagem aqui

Meu código: https://hastebin.com/savuwuzifo.xml

6
  • As colunas ficam coladas, mas elas possuem padding configurado, ou seja, o conteúdo dentro delas já vai ficar com o espaço que você deseja.
    – Oeslei
    7/03/2018 às 17:52
  • Pior que não, @Oeslei, olhe: prntscr.com/io6ypm src: prntscr.com/io6yzt 7/03/2018 às 18:29
  • é no Bootstrap 4 né?
    – Leandro RR
    7/03/2018 às 19:14
  • @LeandroRR pela tag da pergunta é Bootstrap3... Posta sua dica ai, sempre é valido ter outra opção.
    – hugocsl
    7/03/2018 às 19:19
  • valew hugo, e desculpe me qualquer coisa
    – Leandro RR
    7/03/2018 às 19:45

1 Resposta 1

4

Cara tem uma técnica que pode te atender. Ela como uma coluna de 12 dentro de uma coluna de 3, dessa forma vc fica com um padding dentro da coluna de 3 e cria esse espaço entre as colunas.

<div class="col-md-3">
    <div class="col-md-12 col-bg-color">
        <div class="row">
        </div>
    </div>
</div>

Veja o exemplo. (como falei não precisa de CSS é só aninhar as divs col- )

Execute em "Página toda" para ver melhor, pois está responsivo e fica pequeno dessa forma.

* {margin: 0; padding: 0;}
body {background-color: #00192f !important; color: aliceblue !important;}
.logo  {max-width: 30% !important; height: 30% !important; margin-left: 30px;}
.separador {border-bottom: thin solid #5a5a5a !important;}
.espaco-cima {padding-top: 15px;}
.espaco-tudo {padding: 10px 10px 5px 10px;}
.pqn {font-size: 10px;}
.col-bg-color {background-color: #00213e !important; color: aliceblue !important; border: thin solid #5a5a5a; border-radius: 10px;}
.margin {margin: 0px 0px 0px 0px;}
#login-dp{min-width: 250px; padding: 14px 14px 0; overflow: hidden; background-color:rgba(0,0,0,.9);}
#login-dp .help-block{font-size:12px}
#login-dp .bottom{background-color:rgba(0,0,0,.9); border-top:1px solid #ddd; clear:both; padding:14px;}
#login-dp .form-group {margin-bottom: 10px;}
@media(max-width:768px) {
    .logo  {max-width: 20% !important; height: 20% !important;}
    #login-dp{background-color: inherit; color: #fff;}
    #login-dp .bottom{background-color: inherit; border-top:0 none;}
}
::-webkit-scrollbar-track {background-color: #000867;}
::-webkit-scrollbar {width: 6px; background: #000867;}
::-webkit-scrollbar-thumb {background: #1400ff;}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="container-fluid">
            
            <div class="row">

                <div class="col-md-3">
                    <div class="col-md-12 col-bg-color">
                    <div class="row">
                            <a><img src="https://i.imgur.com/j03ymqv.jpg" style="width:100%; height: auto; border-radius: 10px;" alt="Campeonato Zula"></a>
                        </div>
                        <div class="row separador espaco-tudo">
                            <h4>Seletiva Zula Brasil Mundial</h4>
                        </div>
                        <div class="row separador espaco-tudo">
                            <p>Criador: Zula Pro League</p>
                        </div>
                        <div class="row espaco-tudo">
                            <div class="col-md-6" style="padding: 0px !important;">
                                <div class="table-responsive">
                                    <table class="table" style="margin-bottom: 5px !important;">
                                        <tbody>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Data</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">19/03/18&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Horário</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">22:00&nbsp;</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6" style="padding: 0px !important;">
                                <div class="table-responsive">
                                    <table class="table" style="margin-bottom: 5px !important;">
                                        <tbody>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>&nbsp;Organizadora</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">ZPL</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>&nbsp;Vagas</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">20</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-12 col-bg-color">
                    <div class="row">
                            <a><img src="https://i.imgur.com/j03ymqv.jpg" style="width:100%; height: auto; border-radius: 10px;" alt="Campeonato Zula"></a>
                        </div>
                        <div class="row separador espaco-tudo">
                            <h4>Seletiva Zula Brasil Mundial</h4>
                        </div>
                        <div class="row separador espaco-tudo">
                            <p>Criador: Zula Pro League</p>
                        </div>
                        <div class="row espaco-tudo">
                            <div class="col-md-6" style="padding: 0px !important;">
                                <div class="table-responsive">
                                    <table class="table" style="margin-bottom: 5px !important;">
                                        <tbody>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Data</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">19/03/18&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Horário</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">22:00&nbsp;</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6" style="padding: 0px !important;">
                                <div class="table-responsive">
                                    <table class="table" style="margin-bottom: 5px !important;">
                                        <tbody>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>&nbsp;Organizadora</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">ZPL</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>&nbsp;Vagas</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">20</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-12 col-bg-color">
                    <div class="row">
                            <a><img src="https://i.imgur.com/j03ymqv.jpg" style="width:100%; height: auto; border-radius: 10px;" alt="Campeonato Zula"></a>
                        </div>
                        <div class="row separador espaco-tudo">
                            <h4>Seletiva Zula Brasil Mundial</h4>
                        </div>
                        <div class="row separador espaco-tudo">
                            <p>Criador: Zula Pro League</p>
                        </div>
                        <div class="row espaco-tudo">
                            <div class="col-md-6" style="padding: 0px !important;">
                                <div class="table-responsive">
                                    <table class="table" style="margin-bottom: 5px !important;">
                                        <tbody>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Data</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">19/03/18&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Horário</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">22:00&nbsp;</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6" style="padding: 0px !important;">
                                <div class="table-responsive">
                                    <table class="table" style="margin-bottom: 5px !important;">
                                        <tbody>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>&nbsp;Organizadora</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">ZPL</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>&nbsp;Vagas</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">20</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="col-md-12 col-bg-color">
                    <div class="row">
                            <a><img src="https://i.imgur.com/j03ymqv.jpg" style="width:100%; height: auto; border-radius: 10px;" alt="Campeonato Zula"></a>
                        </div>
                        <div class="row separador espaco-tudo">
                            <h4>Seletiva Zula Brasil Mundial</h4>
                        </div>
                        <div class="row separador espaco-tudo">
                            <p>Criador: Zula Pro League</p>
                        </div>
                        <div class="row espaco-tudo">
                            <div class="col-md-6" style="padding: 0px !important;">
                                <div class="table-responsive">
                                    <table class="table" style="margin-bottom: 5px !important;">
                                        <tbody>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Data</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">19/03/18&nbsp;</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>Horário</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">22:00&nbsp;</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-md-6" style="padding: 0px !important;">
                                <div class="table-responsive">
                                    <table class="table" style="margin-bottom: 5px !important;">
                                        <tbody>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>&nbsp;Organizadora</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">ZPL</td>
                                            </tr>
                                            <tr>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn"><strong>&nbsp;Vagas</strong></td>
                                                <td style="padding: 0px !important; border-top: none !important;" class="pqn text-right">20</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

    </div>

4
  • tem como curtir duas vezes a resposta ?
    – Otto
    7/03/2018 às 19:02
  • Haha valeu @Otto , esse truque quebra um galho mesmo!
    – hugocsl
    7/03/2018 às 19:03
  • Galho nada quebra a arvore toda kkk
    – Otto
    7/03/2018 às 19:05
  • Caraca que sensacional! Eu passei uma semana pra tentar arrumar isso kkkk obrigado mesmo, funcionou perfeitamente. Melhor técnica!! 7/03/2018 às 22:12

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 .