Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gilberto Jr

Div Container Fora do Tamanho

Por , em Desenvolvimento frontend

Recommended Posts

Gilberto Jr    26

Gilberto Jr
Postado

Boa tarde;

Bom, sobre o BOOTSTRAP não sei se é nesse fórum. Mas vou postar o meu problema aqui. E caso alguém ja tenha passado por isso possa me ajudar.

Eu estou criando um site em BOOTSTRAP, e dentro da tag BODY eu criei 3 section.container.

<section class=container>

vai a imagem do site

</section>

<section class=container>

vai o menu, a tag nav etc

</section>

Nessa ultima section vai as informações da pagina. E dentro desse container estou colocando as row.

<section class="container" style="background: #f00;">
 
    <div class="row">
      <div style="background: #f2f2f2;" class="col-md-5">Tecnologia Com praticidade. Cumprimos tudo que prometemos. Só prometemos o que podemos cumprimir</div>
      <div style="background: #f00;" class="col-md-6">Div com 410 de largura por 310 de altura. Preparar essa div para receber slide show com fotos e descrição, similar a kw</div>
    </div>
 
    <div class="row">
      <div style="background: #f00;" class="col-md-3">icone 200x200<br>texto</div>
      <div style="background: #60c;" class="col-md-3">icone 200x200<br>texto</div>
      <div style="background: #606;" class="col-md-3">icone 200x200<br>texto</div>
      <div style="background: #ccc;" class="col-md-3">icone 200x200<br>texto</div>
    </div>
 
</section>

Só que essa ultima section esta ficando o tamanho maior que as outras duas que esta acima dela. Veja a imagem abaixo.

layout.png

Alguém ja passou por isso?

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

bruno_mosciatti    22

bruno_mosciatti
Postado

Porque usar section?

Faça o bom uso do Bootstrap e trabalhe com linhas e colunas! Use o sistema de grid.

E se ainda pretende usar section, poste o código completo para que possamos ajudar (css também)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado

Decidi usar row e colunas. Veja a imagem agora.layout2.png

Segue o link para você analisar olhando pelo link

http://tecnogalli.com.br/mobile/new/default2.asp

E também segue o meu código html

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title>TecnoGalli</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script> 

        <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
        <meta name="viewport" content="width=device-width, initial-scale=1">	
</head>
<link rel="shortcut icon" href="img/Miniatura-aba.jpg" type="image/x-icon" />
<body>


<div class="container">

<div class="row">
  <div style="background: #999;" class="col-xs-12 col-sm-12"><img class="img-responsive" src="img/logo.png"></img></div>
</div>

<div class="row">
  <div style="background: #ccc;" class="col-xs-12 col-sm-12">
   <!-- Fixed navbar -->
    <nav style="margin-top: 1px;" class="navbar navbar-inverse navbar-fixed">
      
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <!--<a class="navbar-brand" href="#">TecnoGalli Informática</a> -->
        
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Página Inicia</a></li>
            <li><a href="#about">Manutenção e Infraestrutura</a></li>
            <li><a href="#contact">Contagem de Estoque</a></li>
            <li><a href="#contact">Sistema e Consultoria</a></li>
            <li><a href="#contact">Marketing Online</a></li>
            <li><a href="#contact">Área Restrita</a></li>
            <li><a href="#contact">Contato</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="#contact">Desenvolvimento Web</a></li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
  </nav>
  </div>
</div>


<div class="row" style="background: #fff;">
  <div style="background: #f00;" class="col-xs-6 col-sm-6">imagem</div>
  <div style="background: #060;" class="col-xs-6 col-sm-6">imagem</div>
</div>


<div class="row">
  <div style="background: #999;" class="col-xs-3 col-sm-3">imagem</div>
  <div style="background: #656;" class="col-xs-3 col-sm-3">menu</div>
  <div style="background: #fd5;" class="col-xs-3 col-sm-3">menu</div>
  <div style="background: #d68;" class="col-xs-3 col-sm-3">menu</div>
</div>



	
</div>



<style type="text/css">
  footer{
    padding-top: 20px;
    padding-bottom: 20px;
    background: #2c3e56;
    border: #2c3e56;
    color: #fff;
    font-size: 2em;
  }
</style>

<footer class="navbar-fixed-bottom">
   <div class="container">
      <div class="row">
          <div class="col-sm-12 text-center">
              © TecnoGalli Informática
          </div>
      </div>  
  </div>
</footer>

</body>
</html>

Veja se com esses dados é possível estar me ajudando.

Att;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gilberto Jr    26

Gilberto Jr
Postado
bruno_mosciatti

Eu consegui entender como que funciona o BOOTSTRAP, usando a CLASS="CONTAINER".

Agora ja estou finalizando a pagina inicial do site.

quando ela estiver pronta eu coloco o link para ser analisado.

Obrigado!

Att;

Gilberto Jr

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito