1

Olá, sou iniciando em bootstrap, e já vou pedindo perdão pela ignorância no assunto, to testando algumas coisas, e reparei que ao usar o sistema de grid usando a class "row" houve esse resultado:

inserir a descrição da imagem aqui

note que o bootstrap corta minhas palavras, e adiciona uma barra de rolagem. Não to entendendo o porque disso, já que com a class "row-fluid" não há nem uma divergência, não ocorre os recortes, e nem barra de rolagem. Se possível também, poderia me dar um exemplo simples de uma div responsiva? Código:

<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel = "stylesheet" href = "css/bootstrap.css"/>
</head>
<body>
 <div class="row"> <!-- altera para row-fluid e o probelma desaperece -->
 <div class="span12">
 Fluid 12
 <div class="row-fluid">
 <div class="span6">
 Fluid 6
 <div class="row-fluid">
 <div class="span6">Fluid 6</div>
 <div class="span6">Fluid 6</div>
 </div>
 </div>
 <div class="span6">Fluid 6</div>
 </div>
 </div>
 </div>
 </body>
 </html>
5
  • Qual a versão bootstrap?
    – WMomesso
    Commented 1/11/2017 às 9:06
  • Estou usando a versão 4.0.0-beta.2 Commented 1/11/2017 às 12:57
  • Mais uma dúvida você está iniciando no uso do bootstrap, ou já usou outra versões? se não for um problema posso fazer um exemplo na versão 4.6 Alpha? caso negativo faço na versão que está na pergunta, só me responde que posto a resposta.
    – WMomesso
    Commented 1/11/2017 às 16:17
  • Olá, sou iniciante, nunca usei outra versão posterior. Sinta se a vontade para usar qualquer versão. Commented 1/11/2017 às 17:30
  • resolveu com a minha resposta?
    – WMomesso
    Commented 3/11/2017 às 20:29

1 Resposta 1

1

Vamos por partes.

Grid no bootstrap: Até a versão 3.3.7 Veja a documentação em pt-BR da versão 3.3.7 para ter uma base

Na versão 3.3.7 o bootstrap divide a tela em 12 partes iguais, mas usa porcentagem para que seja renderizado para cada tipo de tela. O cálculo é bem simples de fazer é a quantidade de elementos divido pela quantidade total, exemplo? Vamos imaginar que a tela terá 12 espaços e você queira saber o tamanho de cada espaço.

1 / (12 * 100) = 8.333% então cada parte terá este tamanho en relação ao tamanho de tela.

Imaginemos que temos uma linha class="row" e queremos colocar nela 2 partes amarela e 10 partes azuis, colori a linha de vermelha para poder diferenciar.

<div class="row alert alert-danger">
<div class="col col-md-2 alert alert-warning"> </div>
<div class="col col-md-10 alert alert-info">  </div>
</div>

Tendo o seguinte resultado: unica linha Usei col-md-, para exemplificar mas o bootstrap trabalha com 4 definições diferentes para cada tamanho de tela, conforme tabela abaixo

  • col-xs para telas < 768px;
  • col-sm para telas >= 768px;
  • col-md para telas > 992px;
  • col-lg para telas > 1200px;

Ambos com grid de 12 espaços É comum trabalhar com 2 colunas em dispositivos maiores que 992px col-md-2 e na mesma div com 4 colunas para dispositivos com telas menores que 768px col-xs-4, ficando dessa forma o código.

<div class="col-md-2 col-xs-4"></div>

Usando desta forma o bootstrap renderiza usando @media para que fique responsivo.

/* telas pequenas (smarphones com resoluções menores que 768px) */
@media (min-width: @screen-sm-min) { ... }

/* Telas maiores que 992px) */
@media (min-width: @screen-md-min) { ... }

Desta forma o desenvolvedor só precisa se preocupar em seguir a tabela abaixo.

inserir a descrição da imagem aqui

Abaixo reproduzi a sua tela e a tela que eu imagino que seria a ideal, e após este exemplo falo sobre o bootstrap 4 alpha 6.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
 <h1 class="alert alert-danger">
Este é o seu código
</h1>
<div class="row"> <!-- altera para row-fluid e o probelma desaperece -->
 <div class="span12">
 Fluid 12
 <div class="row-fluid">
 <div class="span6">
 Fluid 6
 <div class="row-fluid">
 <div class="span6">Fluid 6</div>
 <div class="span6">Fluid 6</div>
 </div>
 </div>
 <div class="span6">Fluid 6</div>
 </div>
 </div>
 </div>
 <br>
 <h1 class="alert alert-warning">
 Esse deve ser o resultado que você esperava
 </h1>
 <div class="row"> <!-- altera para row-fluid e o probelma desaperece -->
 <div class="col col-md-12 alert alert-warning">
 Fluid 12
 <div class="row">
 <div class="col col-md-6 alert alert-success">
 Fluid 6
 <div class="row">
 <div class="col col-md-6 alert alert-danger">Fluid 6</div>
 <div class="col col-md-6 alert alert-info">Fluid 6</div>
 </div>
 </div>
 <div class="col col-md-6 alert alert-danger">Fluid 6</div>
 </div>
 </div>
 </div>

Bootstrap v4 alpha6## veja o manual sobre as grids, mas a documentação ainda não está traduzida.

Já na versão 4 alpha 6 o bootstrap abandona o modelo de grip renderizado por espaços e implementa o flexbox deixando mais fácil pratico e organizado o código.

Nesse bootstrap não existe mais col-xs agora ele passou a ser somente col-, conforme nova tabela de grid.

Opções de grid

Enquanto o Bootstrap usa em ou rem para definir a maioria dos tamanhos, os pxs são usados para pontos de interrupção da grade e larguras de contêineres. Isso ocorre porque a largura da janela de exibição está em pixels e não muda com o tamanho da fonte, ou seja as fontes deixaram de ser usadas em px nesta versão e usarão somente em ou rem para definir as fontes e as mesmas manterem um proporção de tamanho (podendo ser maior ou menor, depende do tamanho da tela).

inserir a descrição da imagem aqui

No mais ele trabalha da mesma forma nos nomes de classes.

2
  • Poderias editar e colocar o site da documentação da versão 3.x em diante em Português.
    – NoobSaibot
    Commented 2/11/2017 às 4:05
  • @WéllingthonM.deSouza, obrigado pelo apontamento, edição feita.
    – WMomesso
    Commented 2/11/2017 às 11:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .