css - React/Bulma，我怎样才能在我的列之间获得间隙以及如何将我的按钮居中列内

Question

正如您可能读到的那样。我的问题是如何在我尝试过多种方法并阅读文档的列之间获得一些差距，但似乎没有任何关于它所在的内容的工作，我将不胜感激帮助，我还需要将按钮居中列内这是一个链接。

现在我需要输入更多的文本，因为 stackoverflow 不允许我发布这个关于小文本的问题，但不要担心这个，请帮助我，我真的很努力地试图解决这个问题，但仍然没有用。

import React from 'react';
import {Link} from "react-router-dom";
import "./Projects.css";

const projectStyle = i => ({
    backgroundImage: "url(" + projects[i].imageUrl + ")"
});

const projects = [
    {
        title: "My Portfolio",
        technology: "React/Bulma",
        imageUrl: "https://wallpaperplay.com/walls/full/b/9/6/74908.jpg",
        link: "www.google.com",
        id: 1
    },
        {
        title: "My Portfolio",
        technology: "React/Bulma",
        imageUrl: "https://wallpaperplay.com/walls/full/b/9/6/74908.jpg",
        link: "www.google.com",
        id: 2
    },
        {
        title: "My Portfolio",
        technology: "React/Bulma",
        imageUrl: "https://wallpaperplay.com/walls/full/b/9/6/74908.jpg",
        link: "www.google.com",
        id: 3
    },
]

const Projects = () => {
    return (
        <div className="container">
          <div className="columns is-centered">
            {projects.map((project, i) => (
                <div style={projectStyle(i)} className="column">
                    <h1 className="title has-text-primary has-text-centered is-spaced has-text-weight-bold">
                        {project.title}
                    </h1>
                    <h2 className="subtitle has-text-primary has-text-centered is-spaced has-text-weight-medium">
                        {project.technology}
                    </h2>
                    <Link className="button is-centered is-primary is-outlined is-rounded" exact to={project.link}>Visit</Link>
                </div>
            ))}
            </div>
        </div>
    );
}

export default Projects;

.container .title {
    font-family: cursive;
    text-shadow: .01rem .01rem .5rem black;
}

.columns {
    margin-top: 1rem;
}

.column {
    box-shadow: .01rem .01rem .5rem black;
    margin-top: 4rem;
}

.container .subtitle {
    font-family: cursive;
    text-shadow: .01rem .01rem .5rem black;
}

.container .button {
    transition: all .4s;
}

.container .button:hover {
    transform: translate(0rem, -.5rem);
}

Answer 1

每 bool 玛 docs :

You can specify a custom column gap by appending one of 9 modifiers on the .columns container.

is-0 will remove any gap (similar to is-gapless)
is-3 is the default value, equivalent to the 0.75rem value
is-8 is the maximum gap of 2rem

基本上将“is-x”(其中 x 是从 0 到 8 的数字)添加到具有“columns”类的 div 类。

您的最终代码如下所示:

<div className="columns is-centered is-5">
 {projects.map((project, i) => (
   <div style={projectStyle(i)} className="column">
    <h1 className="title has-text-primary has-text-centered is-spaced has-text-weight-bold">
   {project.title}
   </h1>
   <h2 className="subtitle has-text-primary has-text-centered is-spaced has-text-weight-medium">
  {project.technology}
  </h2>
  <Link
   className="button is-centered is-primary is-outlined is-rounded" 
   exact to={project.link}
  >Visit
  </Link>
  </div>
))}
</div>

至于将按钮居中，这应该可以解决问题:

.container .button {
  transition: all .4s;
  margin: 0 auto;
}