Qual é a classe de fluxo de contêineres de bootstrap?

A estrutura CSS conhecida como Bootstrap oferece uma ampla variedade de classes predefinidas. Essas classes são utilizadas para projetar qualquer aplicativo da web rapidamente. Mais especificamente, as classes de contêiner são uma delas. Bootstrap oferece três tipos de classes de contêineres. Estes são "Fluid de contêiner","recipiente", e "Container- Breakpoint”. Essas classes de contêiner contêm, alinham -se e preenchem o conteúdo e tornam o componente responsivo.

Esta redação descreverá a classe de fluxo de contêiner de bootstrap.

Qual é a classe "Fluid de contêineres" de bootstrap?

O "Fluid de contêiner”A classe no bootstrap é utilizada para fornecer um contêiner de largura total. Possui as seguintes propriedades predefinidas do CSS:

.Fluid de contêiner
largura: 100%;
Right-right: 15px;
preenchimento-esquerda: 15px;
Margem-direita: Auto;
margem-esquerda: automático;

A explicação das propriedades CSS acima mencionadas é descrita abaixo:

• ““largura”A propriedade tem um valor de“100%”, Que indica que os elementos terão a largura total.
• ““Right-right”A propriedade está definida com o valor de“15px”, Que adiciona algum espaço no lado direito do conteúdo do elemento.
• ““preenchimento-esquerda”Está definido com o valor“15px”E adiciona o espaço à esquerda do conteúdo do elemento.
• ““Margem-direita" e "margem-esquerda”As propriedades são definidas com o valor“auto”, Que ajusta o elemento no centro.

Como usar a classe "Fluid de contêineres" Bootstrap “?

Vamos implementar os seguintes exemplos para ver como o “Fluid de contêiner”A classe afeta o layout da barra de navegação de bootstrap:

• Navbar sem o “Fluid de contêiner" Aula
• Navbar com o “Fluid de contêiner" Aula

Exemplo 1: Navbar sem a classe "Fluid de contêiner"
Vamos criar uma barra de navegação seguindo as etapas:

• Primeiro, adicione o “
• Dentro de "
• Então, adicione o “”Elemento com a classe“Navbar-Toggler”. Adicione o "Data-Toggle" e "alvo de dados”Atributos e, em seguida, inclua o ícone Toggler no“" marcação.
• O "alvo de dados”Atributo é atribuído o“eu ia”Valor, que deve ser o mesmo que o“ id ”do bar.
• Então, adicione o “”Elemento, que contém o conteúdo da barra de navegação.
• Os itens do Navbar são especificados usando o “Navbar-Bar" aula.
• Então, os itens são ajustados usando o “NAV-ITEM”Classe dentro da tag“ ”.

Html

Sem a classe "Fluid de contêineres", a barra de navegação se parece com a seguinte:

Exemplo 2: Navbar com a classe “Fluid de contêineres”
Adicione o "Fluid de contêiner"Classe dentro da"”Elemento e adicione a barra de navegação, implementada no exemplo anterior, dentro deste elemento“ ”

Saída

Você aprendeu com sucesso sobre o bootstrap “Fluid de contêiner" aula.

Conclusão

O "Fluid de contêiner”A classe no bootstrap fornece recipientes de largura total para os componentes. Esta classe tem o CSS predefinido “largura”Propriedade com o valor“100%”. Para criar a barra de navegação com largura total e responsiva, atribua o “Fluid de contêiner”Classe para a“