Как взять элементы, сгенерированные в цикле, и поместить их на страницу во flexbox? - PullRequest
Новая
       6

Как взять элементы, сгенерированные в цикле, и поместить их на страницу во flexbox?

1 голос
/ 10 июля 2019

У меня есть страница, которая отображает несколько домашних животных, которые выставлены на продажу.Они размещаются на странице с помощью цикла после заполнения формы.Прямо сейчас, когда я пытаюсь поместить элементы в сетку, и они отображаются как 3 элемента в строке, это не работает, вместо этого они все находятся в одном столбце.Как получить элементы из цикла для отображения в сетке? 

<% posts.forEach(function(post) { %>

<div class="flex-container">
    <div class="row justify-content-around">
        <div class="col-sm">
                <h1><%=post.name %></h1>
                <div><%=post.fee %></div>
                <div><%=post.description %></div>
                <div><%= post.location%></div>  
                <div><a href="/gallery/pet/<%=post.id %>">View More</a></div>
                <% }) %>

        </div>

    </div>

</div>

1 Ответ

0 голосов
/ 10 июля 2019

Ваши классы CSS, скорее всего, все портят.Я привел в порядок структуру HTML и использовал flexbox для выравнивания классов col-auto.

Попробуйте это:

HTML: 



 <div class="container">
        <div class="row">
           // for each in items do |item|
            <div class="col-auto">
                <h1>{item.name}</h1>
                <span>£ {item.price}</span>
                <span>{item.description}<span>
                <span>{item.location}<span>  
                <div>
                    <a href="#0">View More</a>
                </div>
            </div>
           // end loop
        </div>
    </div>

CSS: 

.col-auto{
    display: block;
    margin: auto;
    width: 33%;
    border: 1px solid #ccc;
}

.row{
    display: flex;
    margin: 0 auto;
    width: 100vw;
    flex-direction: row;
}
...