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 Mauricio Molina
      Ola,
       
      Podem me dar uma força, estou elaborando um dashord onde terá algumas funções, uma delas é chamar uma listagem de usuário no banco.
       
      Preciso chamar o css e js para o menu e a tabela.
       
      Sei que é fácil mas sinceramente me perdi, alguém pode dar uma força para chamar os arquivos.
       
      Seguem as imagem de como fica a página
       
      MENU:
       
      <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <script src="js/ie-emulation-modes-warning.js"></script> Tabelas
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> Como chamo tudo junto sem um interferir no outro?
       
      No aguardo...
       
      Obrigado!
       
       
       
       
    • By Mucio Willamys
      olá, gostaria da ajuda de vcs :
      este código traz as informações do banco de dados e as coloca dentro de um select html
      é parte de um projeto de um sistema de uma clínica médica, onde ao cadastrar os médicos posso escolher a especialidade do mesmo.
      <select name="especialidade" required="">                 <option value="" >--Escolha uma especialidade--</option>          <?php              $result_especialidade = "select * from especialidade";              $result_especialidade = mysqli_query($bd, $result_especialidade);              while ($row_especialidade = mysqli_fetch_assoc($result_especialidade)){ ?>                    <option value="<?php echo $row_especialidade['id']; ?>"><?php echo  $row_especialidade['nome']; ?> </option> public function editar($id){ include "Bd.class.php"; $nome = $this->nome; $cpf = $this->cpf; $crm = $this->crm; $especialidade = $this->especialidade; $query = "update medico set nome = '$nome', cpf = '$cpf', crm = '$crm', especialidade_id = '$especialidade' where id = $id"; $status = $bd->query($query); return $status; } Acima ^ está a função editar...
       
       
       
      abaixo está o form com as informações do médico.
      <form method="POST" action="../controller/Controller-medico.php?op=e"> <input type="hidden" name="id" size="5" value="<?php echo $id; ?>" > <div class="campo"> <label for="nome">Nome: </label> <input type="nome" name="nome" size="30" value="<?php echo $m->getNome() ?>"> </div> <div class="campo"> <label for="cpf">CPF: </label> <input type="text" name="cpf" size="30" value="<?php echo $m->getCpf() ?>"> </div> <div class="campo"> <label for="rg">CRM: </label> <input type="text" name="crm" size="30" value="<?php echo $m->getCrm() ?>"> </div> <div class="campo"> <label for="especialidade"> Especialidade: </label> </div> <div class="campo"> <input type="submit" value="Atualizar"> </div> </form> Gostaria de saber como faço pra setar um input ou um select no caso para a alteração do dado(especialidade)?
    • By Tommoraes
      Pessoal preciso de ajudar! Queria implementar no meu site um gerador de texto,  tipo ao clicar no botão "gerar" mostraria  texto aleatórios. Como faço isso no HTML? Fiz uma imagem de exemplo. 
       
       


    • By ciceroolira
      olá, gostaria que alguém possa me ajudar, tenho um iframe com um link por exemplo do site da rede tv, na mesma aba tem o player para assistir ao vivo, gostaria de saber como colocar apenas o player para aparecer e o restante do site ficar oculto.
      ou seja, a unica coisa que vai aparecer no meio do iframe é o player ao vivo, estou começando a aprender agora é não tenho muita experiência.
       
      <!doctype html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <body> <iframe src="https://www.redetv.uol.com.br/aovivo" width="680" scrolling="no" height="400" allowfullscreen></iframe> </body> </html>  
×

Important Information

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