Question

我正在尝试制作bulma卡来渲染我的PostPreview组件。像这样的内联形式。

但是这种方式不起作用

这是我的代码 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获取数据。

我的代码向我展示了这样的内容。

这是沙盒链接sandbox link

这是结果。

Answer 1

如果您想将卡片分成几列，则需要使用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>
);

另请参见bulma文档中的Columns powered by Flexbox 。

您需要将其应用于div组件的postRenderer上。

保加利亚的银行卡无法正常工作

1 个答案: