Publicado em 17 de jun.

Banner quebrando Container / Bootstrap

Galera,

Faz bastante tempo que estou trabalhando num projeto com o framework Lumen (A versão "modesta" do Laravel), nele também estou usando o Blade (pra deixar o trabalho mais rápido).

Existem alguns layouts/includes nos php's em blade que afetam todas as páginas do site. No layout/include principal (que cabe a todas as páginas), sua estrutura encontra-se dessa maneira:

<div class="container">
 @yield('content')
</div>

O problema é o seguinte:

Possuo um banner na página principal que está sendo afetado pelo container, de fato, era para o mesmo estar em full-width (como o fluid-container do Bootstrap).

Não tenho como criar outro include pra essa página, senão teria que alterar várias estruturas e isso afetaria todo o site.

Não posso alterar o include principal, senão todas as páginas vão perder o container.

O que eu preciso é:

**Existe alguma forma de um "<div><img></div>" quebrar o css da sua parent? **

Já tentei usando top, left, ajustando width, height, float, position...
O único que funcionou, claro, foi o position: absolute, mas ele F!@# com a página toda.

Alguma sugestão do melhor a ser feito?

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

André do Vale· 17 de jun.

Olha, dá pra entender parte do problema. Entretanto, para que possamos compreender o que está causando o problema em si, necessitamos ver a página em questão, ou ao menos o pedaço de código que esteja fazendo ocorrer esta situação.

William Bruno· 17 de jun.

**Existe alguma forma de um "<div><img></div>" quebrar o css da sua parent? **

Sim, se a imagem tiver dimensões "estranhas", ela pode quebrar o parent sim.

Talvez um overflow: hidden te ajude a não quebrar o layout, depois de definir dimensões máximas e exatas para o elemento pai dessa imagem.

L. Henrique· 17 de jun.

Conforme pedido, segue o layout antigo (mas ainda está na mesma situação)
>> http://behealthybeoracle.com.br/

Editado: Pra quem não conseguir visualizar o site, o problema é o seguinte:

O blade divide as estruturas, tornando o trabalho mais rápido.

O banner está sendo inserido dentro de uma div com class container, como já citado.

Na visualização do site, o lumen+blade montam dessa forma:

<div class="container">
 <div class="row">
 <div class="slider-top">
 <img src="/img/banner.jpg" class="image-responsive">
 </div>
 </div>

[...]

</div>

Ele acaba adicionando o container antes do banner (o que normalmente deve acontecer). A questão é só a possibilidade de quebra desse container na class do slider-top no código acima.

ENCONTREI A SOLUÇÃO!!!

André e William, consegui uma solução, não foi muito limpa, mas foi uma solução do próprio framework.

Fui na rota da home e setei um $data, feito isso, adicionei ao banner a propriedade do isset com o fluid- pra inserir antes do container.

Ficou assim:

<div class="{{(isset ($home) && ($home) ? 'fluid-' : '')}}container">
 @yield('content')
</div>

Feito isso, ele só alterou a home e eu só adicionei um container pro resto do conteúdo que deveria estar dentro.