Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Boostrap col-md

Referente ao curso Vue.js parte 2: construindo Single Page Applications, no capítulo Dicas e truques e atividade Importando o Bootstrap

por Leveditor
| 124.1k xp | 228 posts

Boa tarde, estou tentando usar o col-md com vue, estou usando v-for mas não funciona 

<div class="row">
   <div v-for="img in fotos">
        <article class="col-md-3">
                <img :src="img.url" >
         </article>
    </div>
</div>

SCRIPT 

data(){
    return {
         fotos: [
           {url: "foto1.jpg"},          
          {url: "foto2.jpg"},
]
     }
}

Não esta querendo alinhar lado a lado, mas desse modo aqui funciona 

<div class="row">
        <article class="col-md-3">
                <img src="foto1.jpg" >
         </article>

          <article class="col-md-3">
                <img src="foto2.jpg" >
         </article>
</div>
1 resposta
solução!
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai Leveditor, tudo bem? O problema esta no seu v-for, vamos ver o seu código:

<div class="row">
   <div v-for="img in fotos">
        <article class="col-md-3">
                <img :src="img.url" >
         </article>
    </div>
</div>

Repare que você tem uma div com a classe row, dentro dela, para cada img no array de fotos você vai criar uma nova div sem classe e dentro de cada div um article com a definição das colunas.

No caso, a definição das colunas deve ser filho direto da row, ficando:

<div class="row">
   <div v-for="img in fotos" class="col-md-3">
        <article>
                <img :src="img.url" >
         </article>
    </div>
</div>

Isso vai fazer com que o Grid funcione, talvez será preciso definir um tamanho máximo para as imagens, algo do tipo:

img {
    width: 100%;
}

Para que elas não ultrapassem o tamanho dos seus elementos pais.

Espero ter ajudado.