Jump to content
alysson122010

Como colocar Column bootstrap

Recommended Posts

@alysson122010 Boas. O conceito do Bootstrap é bem simples, basicamente a estrutura se define:

- .container (absoluto) ou .container-fluid (relativo)

- .row

- .col-*

A quantidade máxima de colunas por linha é 12 (ocupando todo a largura do container, mais do que isso, haverá quebra de linha), então se você precisa de 3 colunas, faça a divisão pelo total de 12 para cada de acordo com a sua preferência. Poderia ser algo como:

1 de 3 + 1 de 6 + 1 de 3 (3 colunas totalizando 12 espaços)

1 de 2 + 1 de 8 + 1 de 2 (3 colunas totalizando 12 espaços)

No seu exemplo, você tem 1 coluna de 8 e outra de 4 - então basicamente seria copiar a coluna de 4 e jogar antes da de 8 e alterar o valor dessas para totalizar os 12 espaços.

 

Abs.

 

Share this post


Link to post
Share on other sites

Show me ajudou muito e consegui fazer. So to com mais uma duvida.

E se quando tiver na versao mobile eu quiser que as postagens apareça primeiro que as duas colunas como eu faço?

Share this post


Link to post
Share on other sites

@alysson122010 Então jovem, nas versões 3x você conseguia reposicionar as colunas utilizando "push" e "pull". Nas versões mais atuais (4x) agora se utiliza a classe "order-*". A ideia é a mesma, ou seja, reposicionar as colunas de acordo com o breakpoint, segue um exemplo básico mas didático baseado na sua necessidade:

<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-6 order-md-2">
      Content
    </div>
    <div class="col-sm-12 col-md-3 order-md-1">
      First Sidebar
    </div>
    <div class="col-sm-12 col-md-3 order-md-3">
      Second Sidebar
    </div>
  </div>
</div>

Abs.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Diego-SLP
      Bom dia, estou com um problema que ao inserir um registro no banco a confirmação via modal não ocorre, mas se eu coloco um botao chamando o modal ele é exibido, ou seja, os scripts e plugins estão corretos né ?! 
       
      Acho que estou esquecendo de algo para chama-lo, se alguem puder ajudar agradeço.
       
      <?php if(isset($_POST['btncadastrar'])){ $obra = strtoupper($_POST['obra']); $status = strtoupper($_POST['status']); $cadastrar = "INSERT INTO tblCliente (obra_cliente,status) VALUES ('$obra','$status')"; $cadastra = mysqli_query($con,$cadastrar); ?> <div class="modal fade" id="aviso" tabindex="-1" role="dialog" aria-labelledby="avisoLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Usuário cadastrado com Sucesso!</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-info" data-dismiss="modal">Corrigir Cadastro</button> <a href="index.php"><button type="button" class="btn btn-success">Ok</button></a> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function () { $('#aviso').modal('show'); }); </script> <?php } ?>  
    • By Diego-SLP
      Bom dia,
      Tenho um exemplo de gráfico e gostaria de saber como eu passo valores vindo do banco para as variaveis do grafico (elas estao inseridas manualmente no arquivo) e eu gostaria de forma dinamica via PHP pegando do meu banco MySQL.
       
      já pesquisei mas o que fiz não consegui puxar os valores, ate tentei colocar em session mas ai trouxe somente o ultimo valor e nao todos.
       
       
      var $visitorsChart = $('#movimentacao') var visitorsChart = new Chart($visitorsChart, { data : { labels : ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'], datasets: [{ type : 'line', data : [100, 120, 170, 167, 180, 177, 160], backgroundColor : 'transparent', borderColor : '#007bff', pointBorderColor : '#007bff', pointBackgroundColor: '#007bff', fill : false // pointHoverBackgroundColor: '#007bff', // pointHoverBorderColor : '#007bff' }, { type : 'line', data : [60, 80, 70, 67, 80, 77, 100], backgroundColor : 'tansparent', borderColor : '#ced4da', pointBorderColor : '#ced4da', pointBackgroundColor: '#ced4da', fill : false // pointHoverBackgroundColor: '#ced4da', // pointHoverBorderColor : '#ced4da' }] }, meu PHP esta assim:
       
      $busca = mysqli_query($con,"SELECT EXTRACT(MONTH FROM DATA) mes, SUM(quantidade) AS qtd FROM dosagem_usina WHERE operacao='saida' GROUP BY mes");  
    • By Artes Ussler
      Boa tarde!
       
      Fiz um menu vertical de navegação usando Bootstrap 4, conforme código abaixo:
      <!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> </head> <body> <nav class="navbar navbar-light"> <h4>CATEGORIAS</h4> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse flex-column" id="conteudoNavbarSuportado"> <h4>FRIGORÍFICO</h4> <ul class="navbar-nav mr-auto"> <li class="" style="display: block;"><a class="nav-link ml-2 py-1 link-subcategoria" href="">TOUCAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CAMISAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CAMISETAS</a> </li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">BLUSAS</a></li> <li class=""><a class="nav-link ml-2 py-1 link-subcategoria" href="">CALÇAS</a></li> <h4 class="mt-2 px-2 py-0" href="" style="font-weight: 700">PROTEÇÃO</h4> </ul> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>  
      Está funcionando em partes. Preciso que, quando o site é carregado em telas grandes, o menu apareça expandido, e quando for aberto em telas menores (mobile), o menu fosse recolhido.
      Mas importante: o menu deverá estar sempre na vertical.
       
      Se alguém puder ajudar, fico grato. 
    • By jcvlanova
      galera, criei esse menu drop down usando o BootStrap, ocorre que ao clicar a primeira vez ele se expande normal, mas quando clico novamente o bicho não retrai. Outro problema que não consigo resolver e que o campo BUSCAR não era para ficar ai mas sim na lateral direita. Como resolvo esses dois problemas ????? Me ajuda ai pessoal.

      Olha ai o meu html
       
      <!doctype html> <head> <title>Componentes</title> <meta charset="utf-8"> <!-- CSS --> <link href="public/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <nav class="navbar fixed-top bg-danger navbar-dark"> <button class="btn dropdown-toggler" type="button" data-toggle="dropdown" data-target="#menu"> <span class="navbar-toggler-icon"></span> </button> <a href="#" class="navbar-brand">LOGO</a> <!-- links --> <div id="menu" class="dropdown-menu"> <a class="dropdown-item" href="#">Home</a> <a class="dropdown-item" href="#">Quem somos</a> <a class="dropdown-item" href="#">Serviços</a> <a class="dropdown-itm" href="#" id="menu_dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sites</a> <div class="dropdown-menu2"> <a href="http://meumundo.com" class="dropdown-item">meumundo</a> <a href="http://M!dium.com.br" class="dropdown-item">M!dium</a> </div> <a class="nav-link" href="#">Fale conosco</a> <form class="form-inline"> <div class="input-group"> <input type="text" placeholder="Buscar" name="buscar" class="form-control input-group-prepend"> <input type="submit" class="btn btn-success input-group-append"> </div> </form> </div> </nav> <footer> <!-- JS --> <script src="public/js/jquery.js"></script> <script src="public/js/bootstrap.bundle.min.js"></script> </footer> </body> </html>

      Valeu
    • By Hamilcar
      Estou usando o bootstrap 4, tenho um script que abre a página de impressão:
      <script> window.onload = function () { var imprimir = document.querySelector("#imprimir"); imprimir.onclick = function () { var usuario = document.querySelector("#usuario"); var menu = document.querySelector("#menu"); var imprime_escala = document.querySelector("#imprime_escala") imprimir.style.display = 'none'; usuario.style.display = 'none'; menu.style.display = 'none'; imprime_escala.style.display = 'none'; window.print(); var time = window.setTimeout(function () { imprimir.style.display = 'block'; usuario.style.display = 'block'; menu.style.display = 'block'; imprime_escala.style.display = 'block'; }, 1000); } } </script> e notei que antes de atualizar para o bootstrap 4, a página de impressão que se abria para impressão de pdf, tinha a aba para escolher entre paisagem ou retrato, e agora não aparece, alguém já passou por isso e conseguiu resolver?
       
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.