Jump to content

Recommended Posts

Bom dia!

 Teria como alguém me ajudar? 

Sou bem iniciante nos códigos e acabou me surgindo uma duvida/problema a qual estou tentando resolver desde hoje cedo...

 

 Preciso criar um contêiner dentro de outro contêiner igual a imagem 1.

 

Só que ele está ficando igual a imagem 2.

 

 Estou utilizando o bootstrap para tentar arrumar isso de uma forma que também traga a responsividade. 

Basicamente eu criei um container fluid e dentro dele tinha outro container, só que não estou conseguindo posicionar ambos corretamente! :cry:

 

imagem1.PNG

imagem2.PNG

codigobugado.PNG

Share this post


Link to post
Share on other sites

Olá @Mewmew !

 

Massa sua descrição do problema, então., Você está usando as classes do bootstrap juntando mais de uma o que está dificultando o posicionamento. Para a largura geral do layout você pode usar apenas a container para largura fixa de 1140px e a container-fluid para deixar a largura de acordo com largura do navegador. Dentro da container você vai trabalhar com as classes row para criar as linhas. A ideia é pensar como uma tabela, row para cada linha e col-xx-x para as colunas. Deixei o xx para indicar os break points que o bootstrap utiliza por exemplo col-sm para pequena largura e lg para largura maior. O último x indica a largura que a coluna vai ocupar, vamos a um exemplo col-sm-12 é uma coluna que ocupa a largura completa porque o bootstrap utiliza 12 e seus divisores para estruturar as colunas, no seu caso você pode colocar uma coluna com col-sm-4 e a outra com col-sm-8 para ter o menu de um lado e a imagem do outro lado.

Abaixo segue um exemplo. Espero que ajude. Qualquer coisa é só perguntar. Até mais.

 

<div class="container">
	<div class="row">
    	<div class="col-sm-4">
          coluna menu
      </div>
      <div class="col-sm-8">
          coluna imagem
      </div>
  </div>
</div>

 

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 michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By CyberBTW
      Eu estou começando a aprender html mas estou com um problema q n me deixa avançar http://prntscr.com/o3fb0g eu n sei oq esta dando de errado, sendo q todas as divs estão fechadas e estão é numeros pares.  Na video aula que eu estava vendo, o cara não teve esse problema então fiquei confuso, sendo q os codigos q eu digitei estão exatamente iguais ao do cara. Quem quiser saber q video é esta aqui: https://www.youtube.com/watch?v=qPYCnebQQ6U parei na parte 25:01
    • By drikscoelho
      Oi, gente! Não estou conseguindo resolver um problema que, aparentemente, é simples. Ajusto o html no dreamweaver e quando levo para ferramenta de email marketing, fica com espaçamento entre as imagens. Queria saber como resolver isso. 
    • By _FelipeOlvr
      Oi pessoal, blz?
       
      Bom, passei quase a tarde toda pra fazer o seguinte:
       
      Imagina que o body tem scroll Y.
      agora imagina que no meio do body tem um elemento que tem scroll no sentido X ( <--------> ).
       
      Minha dúvida é a seguinte: Como eu faço pra que, quando eu colocar o mouse em cima desse elemento que sofre scroll no sentido X, o scroll passe a acontecer nele, e não mais no body.
       
      ( Eu sei que se segurar o SHIFT e girar a rodinha do mouse, o scroll acontece somente nele. Mas eu queria tentar isso, pra dar um trabalho a menos pro usuário )
       
      Fiz um layout básico pra simular o layout em que quero fazer isso. Segue:
       
      <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> JS | Scroll </title> <style> body { min-height: 200vh ; display: flex ; flex-direction: column ; justify-content: center ; } .container-scroll-x { background-color: rgb(219, 237, 240) ; padding: 50px ; } .content { background-color: rgb(127, 189, 207) ; overflow-x: auto ; white-space: nowrap ; padding: 30px ; } </style> </head> <body> <div class="container-scroll-x"> <div class="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laborum, labore quam voluptate neque quod possimus ab nemo odio hic porro ut, officiis qui fuga cumque explicabo, placeat in temporibus. </div> </div> </body> </html> Desde já agradeço a ajuda.
       
       
×

Important Information

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