Contentor de nidificação no interior de um recipiente bootstrap

Estou com um pouco de dificuldade em obter uma resposta definitiva sobre contentores em presilha. É evidente que não se deve aninhar um {[[0]} dentro de um {[[1]} e visa-versa, mas é correcto aninhar um {[[0]} dentro de outro {[[0]}? Estou tentando criar um layout que tenha um div externo que será de largura total e um div interior que será menor que contém conteúdo, uma caixa dentro de uma caixa. Não sei qual é a melhor maneira de fazer isto em presilha.

Author: Hunter Nelson, 2015-07-22
Source

2 answers

Sim, nunca coloque um recipiente dentro de outro.

Dos documentos do Bootstrap:

Contentores

O Bootstrap necessita de um elemento que contenha o conteúdo do site e alberga o nosso sistema de rede. Você pode escolher um de dois recipientes para usar em os teus projectos. Note que, devido a estofamento e mais, nenhum recipiente é possível.

Você pode embrulhar o .container dentro da classe personalizada .outer-container que tem 100% de largura. Definir uma largura perto de 75% quando o tamanho do ecrã é reduzido para mostrar que o contentor interior tem uma largura menor.

.outer-container {
  background: tomato;
  width: 100%;
}
.container {
  background: lightblue;
}
@media (max-width: 1200px) {
  .container {
    width: 75%;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="outer-container">
  <div class="container">
    I am fixed
  </div>
</div>
 9
Author: Manoj Kumar, 2015-07-22 18:04:57

De acordo com a documentação de Bootstrap 3

Note que, devido ao estofamento e mais, nenhum recipiente é nestável.

No entanto, no Bootstrap 3 a {[[0]} tem um .container dentro dele e, ao mesmo tempo, tudo pode ser envolto por um maior .container. Então há um .container dentro de um .container e não é um erro. Para verificar se pode olhar para o código da página aqui, na documentação do Bootstrap: https://getbootstrap.com/docs/3.3/examples/navbar/

 0
Author: A.N., 2018-07-09 17:45:57