Jump to content
Lucas Trindade

Dúvida sobre Bootstrap

Recommended Posts

Boa noite galera!

 

Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.

 

Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.

 

Não sei se fui bem claro mas, como eu arrumaria isso? 

 

Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigadofoto.png.7ca2174a622f5be588738044613b61fd.png

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 jcvlanova
      Galera, dei uma olhada no Site https://www.fastly.com/ e percebi que a página é estruturada com linhas curvas que circundam os tópicos da página, alguém saberia me dizer como é possível fazer essas linhas curvas numa página html ???
    • By paulo.xmx
      alguem pode me ajudar, sou novo e estou con site adulto e preciso programação para códigos HTML
      uma vez que trata-se de um site de conteúdo restrito. preciso visualizar as etapas para incluir um código HTML e criar a barra
       de consentimento para maiores de 18 anos
    • By Carcleo
      Tenho um botão, que pega a primeira li da ul e joga ela para a ultima posição ininterruptamente e assim eu faço um efeito de slideshow.
       
      HTML:
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="slider"> <ul> <li> Slide 1 </li> <li> Slide 2 </li> <li> Slide 3 </li> <li> Slide 4 </li> </ul> <button id="back"> BACK </button> <button id="next"> NEXT </button> </div> CSS:
      * { margin: 0; padding: 0; } body { display: flex; width: 1000px; margin: 0 auto; } .slider { position: relative; display: flex; flex-direction: column; width: 1000px; height: 200px; overflow: hidden; border: 1px solid #000; } .slider > ul { display: flex; flex-wrap: wrap; width: 5000px; } .slider > ul > li { display: flex; justify-content: center; width: 500px; height: 150px; margin: 10px; } .slider > ul > li:hover { cursor: crosshair; } .slider > button { position: absolute; display: flex; justify-content: center; top: calc(45% - 15px); width: 30px; height: 30px; opacity: 0.2; } .slider > button:hover { opacity: 1; cursor: pointer; } .slider > button#back { left: 10px; } .slider > button#next { right: 10px; } .animacao { animation-duration: 4s; animation-name: identifier; } @keyframes identifier { 0% { right: 0; } 50% { right: 50%;} 75% { right: 75%; } 100% { right: 100%; } } JQUERY:
      function intervalo () { $(".slider > #next").click (); } var interval = setInterval(intervalo,4000); $(".slider > ul > li") .mouseover(function(){ clearInterval(interval); }) .mouseout(function(){ interval = setInterval(intervalo,4000); }) .addClass("animacao"); $(".slider > #back").click ( function(){ var liMover = $('.slider ul li:last-of-type'); // copia o conteudo da última $(liMover).insertBefore('.slider ul li:first-of-type'); // insere antes da primeira }); $(".slider > #next").click ( function(){ var liMover = $('.slider ul li:first-of-type'); // copia o conteudo da primeira $(liMover).insertAfter('.slider ul li:last-of-type'); // insere depois da última }); Tudo funciona bem.
      Mas estou tentando adicionar um efeito de transição tipo quando as lis mudarem de posição, elas correrem da direita para a esquerda em vez de aparecerem abruptamente.
       
      Será que tem como?
       
       
    • By opl12
      Olá mestres
       
      Tenho uma página em HTML que está no servidor Xampp.
      Tem como eu executar/chamar para abrir um arquivo, seja uma planilha, seja um PPT, ou seja um EXE sem que eu faça o download?
       
      ou seja, ao clicar no link ele já abra o arquivo sem que faça o download?
       
       
    • By juliosonic
      Boa noite..
      Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>
      https://cristaispuroencanto.com.br/
      https://www.mandalatantra.com.br/
              
      Obrigado
      Att
      Julio Cezar
       
       
       
×

Important Information

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