Jump to content
Superwagtel

jumbotron invadindo container abaixo

Recommended Posts

Olá pessoal, estou iniciando como bootstrap, e já me deparei com um problema que não consigo resolver com HTML5 nem com CSS3

 

Criei uma página com o bootstrap e segui todos os procedimentos do curso, mas o carrossel ou galeria que baixei no bootstrap fica invadindo a área do container abaixo.

 

<section class="jumbotron">
	<div class="container-fluid">
					
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
  
    <div class="item active">
      <img src="images/banner1.jpg" alt="...">
      <div class="carousel-caption">
        BANNER 1      </div>
    </div>
	
    <div class="item">
      <img src="images/banner2.jpg" alt="...">
      <div class="carousel-caption">
        BANNER 2      </div>
    </div>
	
	<div class="item">
      <img src="images/banner3.jpg" alt="...">
      <div class="carousel-caption">
        BANNER 3      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>  </a></div>


  </div>
</section>

Veja na imagem print do site o que está acontecendo:

 

Layout--Problema.jpg

 

A única alteração que fiz no arquivo bootstrap.css foi acrescentar a classe slide:

 

.slide{
	margin:0 auto;
	padding:0px 0;
	margin-top:0px;
	margin-bottom:10px;
}

.slide img{
width:100%;
height:auto;
}

 Alguém pode me dar uma luz sobre onde estou errando ou o que não estou vendo de errado?

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 Superwagtel
      Olá pessoal, eu até conheço o CSS, mas estou estudando o Bootstrap e de cara estou com uma dúvida:
       
      No curso que fiz ensina a criar um navbar no topo da página e o jumbotron (onde fica o banner) abaixo do navbar.
      Mas eu estou tentando fazer com que o jumbotron fique acima no navbar, ou seja:
       
      1º O Banner;
      2º Os botões de navegação.
       
      Aprendi assim:
      <header><nav class="navbar navbar-inverse navbar-static-top" role="navigation"> <section class="jumbotron"><div class="container"> Mas quando coloco assim dá problemas:
      <header class="jumbotron"><div class="container"> <section><nav class="navbar navbar-inverse navbar-static-top" role="navigation"> O desta forma o banner até que fica acima, mas quando abro em outro navegador ou no Mobile, tenho que atualizar a página pra ele se ajeitar!!!
       
      Alguém pode me dizer como faço pra deixar o banner acima do navegador?
×

Important Information

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