карта в булме не работает так, как должна работать - PullRequest
Новая
       10

карта в булме не работает так, как должна работать

0 голосов
/ 29 января 2019

Я пытаюсь сделать булма-карты для рендеринга моих компонентов PostPreview.Как-то так во встроенной форме.

card display

Но так не работает

Вот мой код PostPreview.js

import React from 'react'


function postPreview(props) {
    console.log(props);
  return (
    <div className="card__wrapper">
        <div className="card">
            <div className="card-image">
                <figure className="image is-4by3">
                    <img src={props.imageURL} alt={props.title}/> 
                </figure>
            </div>
            <div className="card-content">
                <div className="media-content">
                    <p className="title is-4">{props.title}</p>
                    <p className="subtitle is-6">@johnsmith</p>
                </div>
            </div>
            <div className="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Phasellus nec iaculis mauris. <a>@bulmaio</a>.
                <a href="#">#css</a> <a href="#">#responsive</a>
                <br/>
                <time datetime="2016-1-1">{props.date}</time>
            </div>
        </div>
    </div>
  )
}


export default postPreview

Я получаю данные из graphql.

Мой код показывает мне что-то вроде этого.

это ссылка в песочнице ссылка в песочнице

Это результат.

image result

1 Ответ

0 голосов
/ 29 января 2019

Если вы хотите, чтобы ваши карточки были в столбцах, вам нужно обернуть их в контейнер с className="columns" и дать вашему предварительному просмотру поста className="column" с шириной, например, is-one-quarter, чтобы в каждой строке было 4 карточки.

Пример 

const PostPreview = ({title, imageURL, date}) => (
    <div className="card__wrapper column is-one-quarter"> {/* apply 'column class here' */}
        <div className="card">
            {/* ... */}       
        </div>
    </div>
);

const Posts = () => (
    <div className="container">
        <div className="columns is-multiline"> {/* apply 'columns' class here */}
            <PostPreview title="post 1" imageURL="https://via.placeholder.com/500" />
            <PostPreview title="post 2" imageURL="https://via.placeholder.com/500" />
            <PostPreview title="post 3" imageURL="https://via.placeholder.com/500" />
            <PostPreview title="post 4" imageURL="https://via.placeholder.com/500" />
            <PostPreview title="post 5" imageURL="https://via.placeholder.com/500" />
            <PostPreview title="post 6" imageURL="https://via.placeholder.com/500" />
        </div>
    </div>
);

Edit v865l37lnl

Также см. Столбцы с питанием от Flexbox вbulma docs.

В вашем случае вам необходимо применить это к div вашего postRenderer компонента.

...