Discussion between André Baill and hugocsl - 2018-10-31

last day (15 days later) »

6:53 PM

1

A: Div não esta alinhando CSS

A melhor opção para não precisar recorrer a CSS customizado seria separa cada grupo de 3 col-md-4 em um .row conforme exemplo abaixo: [class^="col-"] { padding: 10px; border: 1px solid; } <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/...

Não deu certo, não consegui aplicar na classe que te mostrei antes.

@AndréBaill Qual das opções que dei não deu certo ai? A separando de 3 em 3 col-md-4, ou a que tem que colocar display:flex e flex-wrap:wrap; na ROW pai? Se aqui no exemplo funcionou ai tb tem que funcionar, a não ser que tenha algum outro css que vc fez sobrescrevendo o que eu fiz...

Hm mas ai vou ter que alterar a estrutura do PHP, porque ele tá repetindo as classes do col-md-4

@AndréBaill então coloca no seu CSS assim .row { display: flex; flex-wrap: wrap; } ou cria uma classe pra .row tipo <div class="row meu-grid"> e no CSS cria .row.meu-grid { display: flex; flex-wrap: wrap; }

Entendi, mas acho que a minha estrutura está errada, porque não deu certo... de nenhuma das formas

6:53 PM

@AndréBaill confere lá no browser, da um Ctrl+U e confere como está ficando a estrutura do HTML já renderizado. Confere se ele não está criando .row, ou .containers a mais etc, confere como ele está montando o html, e se possível edite sua pergunta e coloca esse código que aparece lá no browser!

Eu fiz dessa forma: .row { display: flex; flex-wrap: wrap; } só que a unica coisa que ficou ruim, foi a linha... que uma ficou mais pra cima e outra ficou mais pra baixo por causa do conteúdo...

@AndréBaill apenas vc falando assim, não consigo visualizar o seu problema.. tenta ajustar com um margin-bottom na col-md-4 pra ver se resolve... Aqui ficou assim: imgur.com/a/BoWksXq

@hugocsl - no caso agora ficou assim: prntscr.com/lcte6j

em vermelho, ele não desceu o restante da div, pra alinhar

.blog-content{
padding: 20px 25px 0 25px;
border: 1px solid #f1f1f1;
}

Essa é a classe

Faz assim

nas col-md-4 dentre dessa row vc coloca no css col-md-4 {flex:1}

prntscr.com/lcthv0

Ficou assim rs

7:02 PM

ptz...

vc tem um link dessa página ou está só local?

Está local :(

Se você usar temview, não tenho problema em acessar aqui.

Talvez seja algo que eu não esteja conseguindo achar

Eu programo a muito tempo, mas estou há quase um ano sem programar, ai esqueci muita coisa

Seu problema parece ser com algum CSS que está afetando essa parte

Pode ser.

Estou aqui procurando uma resposta que eu já tinha dado muito parecida com essa sua

Eu lembro que eu já vi também, não lembro onde

7:07 PM

Olha aqui, repare que vc colocar uma borda em cada col elas ficam do mesmo tamanho

1

A: Alinhar listas de tamanhos diferentes na div em Bootstrap

Vc pode tratar o .row que as listas estão dentro com display:flex e flex-wrap assim vc evita que as listas fiquem "encavaladas" e joga o conteúdo que não couber para a "linha" de baixo Para entender melhor como fica veja o snippet abaixo (exiba também em "Página toda" para ver o resultado) ...

Na verdade acho que acapei de pensar aqui... já sei qual é o problema

vc está usando a margem em qual elemento? não é na col né?

Não

é isso... se vc colocar a borda na Col- vc vai ver que está tudo do mesmo tamanho...

Esta resposta que você colocou, eu inclui lá, mas não dá

Não, a borda está no blog-content

Nisso você tem razão, estão todas do mesmo tamanho, porém, elas ficam grudadas em cada div.

Se eu colocar um espaçamento margin: 5px, ficam somente 2 colunas

Porque faltaria espaço para a outra

prntscr.com/lctnca

Sim imaginei que isso pudesse acontecer, da uma olhada nessa resposta, execute ele em página toda! pt.stackoverflow.com/questions/281286/…

Tenta seguir essa ideia que pode ser que de certo...

Entendi, vou tentar

Mas tem uma tag que a gente poe, que ele deixa todas as divs do mesmo tamanho.

Tentei o display, mas não era essa

7:18 PM

normalmente é com display:flex mesmo

E eu já tive esse problema

E não lembro como resolvi

tenta da forma que te indiquei, se não der certo me dala que a gente tenta fazendo com flex nos itens internos pra deixalos com 100% da altura da Col

@hugocsl Já tentei também

Vi no seu código que depois da col-4 tem uma div com a classe vazia!

ta assim!

<div class="col-md-4">
                <div class="">

Tem como colocar a borda nessa Div? <div class="">?

Ah sim, ali tem uma classe, que eu tinha tirado, mas agora está de volta.

<div class="blog-content">
<a href="<?php echo base_url('curso/detalhes/'.$valor->id.'/'.url_title($valor->titulo))?>" class="">
<h3><?php echo $valor->titulo; ?></h3>
</a>
<span><?php echo $categ[0]->titulo; ?></span>
<p class="text-justify"><?php echo $valor->referencia; ?></p>

<div class="blog-footer">
<a href="<?php echo base_url('curso/detalhes/'.$valor->id.'/'.url_title($valor->titulo))?>" class="edufair-course-text">Conhecer</a>
</div>
</div>

Essa blog-content, é o css que tem a borda

.blog-content{
padding: 20px 25px 0 25px;
border: 1px solid #f1f1f1;
}

7:24 PM

Tem que ser nessa div logo depois da Col... tenta colocar a borda nela pra ver como fica, ai vc coloca display:flex também na col-md-4, e nessa div com a borda vc coloca flex:1

eu to apertado aqui, mas se vc não conseguir desse jeito me fala que vou tentar aqui de novo com o seu código

Não deu

Tentei dessa forma tb

Tá estranho

consegui!

user image

.teste {
border: 1px solid;
margin-bottom: 10px;
flex: 1;
}
.col-md-4 {
display: flex;
}
.row {
display: flex;
flex-wrap: wrap;
}

html assim

<div class="row">
            <div class="col-md-4">
                <div class="teste">
                    <div class="edufair-blog-overlay">
                        <img src="http://localhost/sites/fatb.com.br/php/admin/assets/uploads/Informatica-Basica.png"
                            alt="Informática Básica" class="edufair-blog-image">
                        <div class="edufair-blog-middle"></div>
                    </div>

                    <div class="blog-content">
                        <a href="http://localhost/sites/fatb.com.br/php/curso/detalhes/5/informatica-basica" class=…

O principal é essa parte!

<div class="row">
        <div class="col-md-4">
            <div class="teste">

Isso ai

Ai deu certo :)

te falei :D

rsrssr

É que eu addc a div

igual você incluiu

Certinho, muito obrigado.

Você tem tempo p jobs?

Institucional

7:37 PM

demoro, qq coisa é só dar o toque!

Sim, costumo pegar uns freelas por fora

mas trabalho em uma fábrica de software...

Interessante

Eu tenho 4 sites na pauta

Se precisar de braço estamos ai

Mas não tô com condições psicológicas pra desenvolver eles

Não sozinho

Esse é o último que fiz, é uma landpage simples, nem usei framework

Me adc no Whats, pra eu te mostrar a ideia do layout.

7:39 PM

tactintas.com.br/skypark

(41) 9 9236-3963

vou add lá

Bacana, eu já estou c/ o layout definido

é um provedor de internet

o site tactintas.com.br tb foi eu que fiz, mas esse foi mais na correria, então o carrossel por exemplo ficou o original do Bootstrap mesmo rss, mas o resto fiz com mais caprixo!

Massa, e vc está precisando que monte o html/css ?

www.nuclemig.com.br - www.coperfarma.com.br

então, eu estou c/ o layout em wordpress, mas vamos desenvolver ele usando o codeigniter, que é mais fácil pra mim, mas, tem que transformar o layout em bootstrap normal

vou te enviar o link do layout

preview.themeforest.net/item/…

7:42 PM

vou ver aqui o material

ok

te dei um toque no whatsapp recebeu ai?

Sim

blz

nesse site da nuclemig parece que vc teve esse mesmo problema com o tamanho dos boxes rss, veja que ele têm o mesmo tamanho, mas o conteúdo são de tamanhos diferentes... deve ter sido lá que vc agarrou com isso tb...

Tive

7:47 PM

eu vi lá o site atual da Tempus

Vc quer "replicar" o template de WP e refazer tudo no Bootstrap é isso?

Tipo pegar esse layout e refazer usando BS? preview.themeforest.net/item/…

Acho que não precisa fazer tudo no bootstrap, se usar ele da forma que está e importar apenas o css, mesmo que venha com as classes do wordpress, daria certo também

Acho que funcionaria, mas seria um trabalho tão minucioso que talvez fosse melhor refazer do 0 mesmo... Vc já tem esse template?

Acho que o certo seria refazer o template

C/ bootstrap

Uma coisa bem feita

né

tb é a minha ideia... acho que deve dar até menos trabalho rss. Usa aquele modelo com base do layout e vai replicando com o Bootstrap etc

sim e montando o layout

igualzinho eesse

7:53 PM

Lógico que uma coisa ou outra a gente pode consultar lá como a estrutura do HTML, algumas classes do CSS e tudo mais

Teria que ser igual o layout

uma coisa ou outra, pode fugir a regra

isso replicando tudo, copiando as classes do css e tudo

te garando 90% de fidelidade ao que esta lá

só algumas coisas como por exemplo esse Slider no topo, ai tem que ver como vai fazer a parte dinâmica...

Sim.

Você trabalha com o codeigniter?

pois com CSS eu consigo deixar igual, mas dai deixar ele "interativo" com a programação JS eu não sei fazer... teria que partir de algum plugin jQuery ou customizar o do BS mesmo, ou até um OWL Caroucel da vida

Pode ser BS mesmo

7:55 PM

Não nunca mexi com codeigniter, na verdade nem sei direito o que é rss

framework php

mas funciona bem, e é simples

tipo laravel?

mas quanto custaria pra você desenvolver?

yes, tipo laravel

eu manjo MUITO pouco de php rss, meu negócio mesmo é html/css, e alguma coisa ou outra de jQuery como uns plugins etc eu tb consigo adaptar

Hmm

Quanto você faria para transformar esse wordpress em bootstrap?

100%?

7:58 PM

Depende, se for pra fazer só a index, a primeira página ali ficaria em 300

e aproveitando, tenho um outro trabalho: www.jcentregasrapidas.com.br ele tem falhas no css, em relação ao mobile

mas acho que com ela pronta vc consegue fazer o resto do site só duplicando os módulos de código etc

creio que sim

você é de onde Hugo?

sou de Belo Horizonte MG

Vc é de curitiba?

Sou sim.

8:13 PM

Dei uma olhada lá no site da jcentregasrapidas

No celular ele se comporta mal

parece que a index, e o menu superior está bem bugadinho mesmo

sim aquele form no topo fica todo cortado

sim.

Jovem tenho que ir aqui, qq coisa me chama lá no whatsapp

abs

Chamo sim, abraço.

E muito obrigado pela ajuda.

last day (15 days later) »

Transcript for

Oct '1831

Discussion between André Baill and hu…

Imported from a comment discussion on pt.stackoverflow.com/que...

css twitter-bootstrap

join this room
about this room

00:00

06:00

12:00

18:00

all times are UTC

site design / logo © 2024 Stack Exchange Inc; legal

mobile