bulma 中的卡片无法正常工作

Question

我正在尝试制作 bulma 卡片来呈现我的 PostPreview 组件。类似这样的内联形式。

但它不是这样工作的

Here is my code 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 获取数据。

我的代码显示了这样的东西。

这是沙盒linksandbox link

这是结果。

Answer 1

如果你想让你的卡片在列中，你需要用 className="columns" 将它们包装在一个容器中，并给你的 post 预览一个 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>
);

另请参阅由 Flexbox 提供支持的列在 bulma 文档中。

在您的情况下，您需要将其应用于 postRenderer 组件的 div。

bulma 中的卡片无法正常工作

card in bulma is not working as the way it has to work

reactjs

graphql

bulma