React/Bulma, How can i get gap between my columns and how to center my button inside the column

问题

As you probably read. My question is how can i get some gap between the columns ive tried multiple ways and also read the documentation but nothing seems to be working idk on what it is lying on, i would appreciate help and i also need to center the button inside the column which is a Link.

And now i need to type some more text beacause stackoverflow does not let me post this question concerning to little text but dont worry about this and please help me, i really struggled trying to fix this but still it did not work.


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);
}

回答1:

Per bulma 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

Basically add "is-x" (where x is a number 0 through 8) to the class on the div with the "columns" class.

Your final code would look like this:

<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>

As for centering the button, this should do the trick:

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

来源：https://stackoverflow.com/questions/57860661/react-bulma-how-can-i-get-gap-between-my-columns-and-how-to-center-my-button-in

标签

css

reactjs

flexbox

bulma