使用Bulma.css在React.js中每隔3个列元素添加新的列容器
在React.js中使用Bulma.css来创建网格布局，可以通过使用Bulma的栅格系统来实现。栅格系统是一种将页面划分为等宽的列的方法，可以方便地创建响应式布局。
首先，确保你已经在React.js项目中引入了Bulma.css。可以通过在index.html文件中添加以下代码来引入Bulma.css：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">接下来，在你的React组件中，可以使用Bulma的栅格系统来创建网格布局。在每隔3个列元素后添加新的列容器，可以使用Bulma的columns和column类来实现。
首先，导入React和Bulma的样式类：
import React from 'react';
import 'bulma/css/bulma.min.css';然后，在你的组件中，使用columns类创建一个包含多个列的容器：
const MyComponent = () => {
return (
<div className="columns">
{/* 列元素 */}
<div className="column">列元素1</div>
<div className="column">列元素2</div>
<div className="column">列元素3</div>
{/* 新的列容器 */}
<div className="column">新的列容器</div>
{/* 列元素 */}
<div className="column">列元素4</div>
<div className="column">列元素5</div>
<div className="column">列元素6</div>
{/* 新的列容器 */}
<div className="column">新的列容器</div>
{/* 列元素 */}
<div className="column">列元素7</div>
<div className="column">列元素8</div>
<div className="column">列元素9</div>
{/* 新的列容器 */}
<div className="column">新的列容器</div>
</div>
);
};在上面的代码中，我们使用了columns类创建了一个包含多个列的容器。每个列元素都使用column类来定义。在每隔3个列元素后，我们添加了一个新的列容器，也使用column类来定义。
这样，就可以实现每隔3个列元素添加新的列容器的效果。
关于Bulma.css的更多信息和使用方法，你可以参考腾讯云的Bulma.css产品介绍页面：Bulma.css产品介绍
注意：以上答案中没有提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商，以遵守问题要求。
相关·内容
我刚刚开始学习reactjs和bulma.css。我正试图使用bulma的柔性盒制作一个<footer>，以将其固定在页面底部，因为我希望避免编写自己的css规则。
我已经使用npm安装了bulma，并在bulma.css中导入了index.js，如下所示
import "bulma/css/bulma.css";
但是我下面的代码仍然让<footer>卡在标题下面。
<div className='container'>
<header className='has-text-centered'&g
浏览 1提问于2022-03-17得票数 0
回答已采纳
我试图在Nextjs中创建一个包含Bulma的3列Card Grid。数据来自。
我成功地获取了数据，而且它非常完美。
但是，我找不到我在这件事上做错了什么。
不管怎样，我可以限制专栏。在Bootstrap中，我做了Col sm={4}以限制为3列。不知道怎么在Bulma做这事
，它是这样出现的。
我从这个问题中得到了SplitEvery的代码()
这正是我想要的。我只想要3列(连续3张卡)，如下所示
这是我的index.js代码
import Head from "next/head";
import Image from "next/image&
浏览 1提问于2021-09-22得票数 1
回答已采纳
我使用的是Bulma 0.4.0，尽管答案可能与Bulma本身无关。
如何将列高度设置为与其他列相等？(见下面的截图)
编辑:显示实际行为的更多文本代码：
预期行为：
实际行为：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
<div class="column">
&l
浏览 3提问于2017-04-22得票数 22
回答已采纳
2回答
如何在移动端或平板电脑上更改列的堆叠顺序？
例如，下面的代码在宽屏幕上水平显示元素，但当它缩小时，我希望2在顶部。我不想改变html的结构来做这件事。
示例如下：
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.css" rel="stylesheet"/>
<div class="columns">
<div class="column box">
1
</div>
浏览 0提问于2017-01-18得票数 18
回答已采纳
我想要一个五分之三宽的部分，它将是中心的。一开始，当我只有“部分”时，内容是水平居中的，但它占用了整个屏幕的宽度。所以我添加了一个列的父div，列的是-五分之三。现在我有一个五分之三宽但不是中心的部分，那么最好的方法是什么呢？
.section{
border: 1px solid;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<
浏览 1提问于2018-05-31得票数 4
回答已采纳
我试图把一个列放在一个level-item中，但它似乎缩小到了一个很小的宽度。有没有办法让列占据level-item的整个宽度？ 代码如下： <html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
<div class="level">
<div class="
浏览 16提问于2021-11-22得票数 1
回答已采纳
5回答
我在挣扎如何显示列或每四个记录打破一列。我使用bulma列，我的目标是在数组映射中的每四个记录上显示列。谢谢你帮忙。
映射函数中的
{list.map(function(item, key){
return <div className="columns">
<div className="column">{item.name}</div>
</div>
})}
假设列表是8条记录，那么预期的结果应该与类似
<div className="columns">
<div
浏览 13提问于2019-10-11得票数 2
回答已采纳
1回答
我使用的是Vue + Bulma。 按钮单击事件用于更新DOM。但是，在更新DOM之后，焦点状态仍然应用于按钮。 我希望更新后的按钮不具有焦点状态。 处理这个问题的最好方法是什么？有没有一种更常用的Vue.js方法来处理这种常见的场景？ 简化后的示例如下： var app = new Vue({
el: '#app',
data: {
options: [{
text: "This is the first text"
}, {
text: "This is the second text"
浏览 24提问于2021-08-31得票数 0
1回答
我对bulma容器的具体布局有一个问题。我想显示一个布局与两个列在一个容器，左背景部分必须是灰色和右白色。我需要将列包装在容器中，以获得大小和断点。
.container{
min-height: 100vh
}
.left{
background-color: lightgray;
min-height: 100vh
}
.right{
background-color: white;
min-height: 100vh
}
<link rel="stylesheet" href="https://cdn.jsdelivr.ne
浏览 3提问于2020-10-06得票数 1
1回答
大挠性箱柱落页
、、
我正在创建一个简单的2列布局。左边的列应该是窄的，并且包含一个垂直的导航栏，右边的列将包含站点的主要内容。我使用bulma-css列来创建这个布局。
我遇到的问题是，根据水平窗口的大小，第二列右侧的一部分正在从页面上掉下来。因此，本专栏没有适当地进行缩放。
下面是一个很小的例子来说明这个问题。取决于窗口大小，按钮将(部分)从屏幕上掉下来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test&
浏览 0提问于2018-03-14得票数 2
回答已采纳
我创建了一个名为react的新组件，用于显示一些用户信息。我将每个用户数据放在一个对象数组中。我想创建一个布局，显示每3个用户在一个行容器(列为Bulma css框架)与每个用户的列元素。 我检查了其他问题，比如这个create new row after every 3 column in loop，它们都使用HTML语言中的非结束标记来创建布局，但是在React.js中，所有的标记都必须有一个结束标记。 users: [
{id:1, name: Tomas}
{id:2, name: Tomas}
{id:3, name: Tomas}
{id:4, name: Tomas}
{id:
浏览 12提问于2019-01-15得票数 1
回答已采纳
1回答
对于我的网络项目，我正在使用Bulma创建一个响应web应用程序。我不太擅长CSS，因为我的背景是iOS & Android。因此，我试图实现这样的布局：
1.桌面
所有列都应根据其内容具有动态高度，但第3列的宽度应保持在视口的30%。
2.移动
所有列都应具有动态高度，但唯一的区别是在第1列和第2列之间插入第3列。所有列的宽度应占视图端口的100%。
到目前为止我尝试过的
<link href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css" rel="sty
浏览 4提问于2021-01-31得票数 1
我是新来的反应。我想在我的头上做一个导航。我使用bulma css：
"bulma": "^0.7.4",
我像这样导入bulma文件：
import 'bulma/css/bulma.css';
它适用于大多数css，但不适用于汉堡包菜单，当我单击汉堡包按钮时，菜单不会折叠。
以下是我的头代码：
import React,{Component} from 'react'
import {NavLink} from 'react-router-dom';
import style from './style
浏览 3提问于2019-03-06得票数 9
回答已采纳
我已经开始学习React js了。现在，我正在使用React.js构建一个博客页面，最好是一个3栏的布局。有没有一种有效的方法来创建一个简单的3列布局，在那里我可以style列。创建了一个App.js文件，并使用Blog.js，BlogItem.js在components文件夹下创建了文件，但是如何在React.js中传递3列结构布局？请指教
// App.js：
import React, {Component}from 'react';
import Blog from './components/Blog'
import './App.css
浏览 0提问于2019-10-08得票数 2
回答已采纳
使用React和Bulma ，如何使用css使列垂直滚动(溢出-y)？
在下面提供的代码中，由于使用了filters组件，我只是获取了第一列中显示的一组过滤器。然后，我希望使用DocumentListView组件显示一个文档列表。这发生在第二栏中。
请注意，我向第二列添加了一个可滚动类，以便使该列垂直滚动。
import React from 'react'
import Filters from './components/Filters/Filters'
import DocumentListView from './components/Docum
浏览 2提问于2020-12-10得票数 1
回答已采纳
2回答
我创建了一个显示商品的页面，在每个商品旁边都有一个按钮，您可以用它来选择或取消选择商品。我的问题是，当我点击任何一个按钮时，所有的按钮都会发生变化。如何使负责更改按钮状态的回调函数仅适用于已单击的按钮？
import React from 'react';
import { useState } from 'react';
import 'bulma/css/bulma.css';
import './App.scss';
export const goods = [
'Dumplings',
'
浏览 4提问于2022-11-19得票数 0
1回答
我想要我的按钮添加加载动画类点击和删除类后，请求完成。我使用bulma，它有加载动画的类。
我已经用这段代码实现了我想要的结果，但我不确定这是否是这样做的“反应方式”。以下是我所做的：
class App extends React.Component {
constructor () {
super()
this.state = {
users: [],
isLoading: false
}
}
toggleLoading = () => {
this.setState((prevState, props)
浏览 1提问于2018-02-21得票数 3
回答已采纳
我有一个基本的电子邮件捕获表单，但当显示错误消息时，我无法计算CSS以防止提交按钮移动：
我正在使用React.js来构建它，并且尝试使用柔性盒，沿着顶部对齐列的内容。下面是来自我的组件的html片段，我使用作为文本字段并提交按钮：
<div className='row'>
<form className='registration' onSubmit={this.handleSubmit}>
<div className='column'>
{ !this.props.reg
浏览 2提问于2017-04-27得票数 0
回答已采纳
我是新的反应和我尝试使用道具在我的测试页面。使用{this.props.children}之后，所有内容仍将被替换，而不是显示在子声明中。
如何使用props.children显示页面？
src/app.js
import React from 'react';
import ReactDOM from 'react-dom';
import { IndexRoute, Switch, BrowserRouter as Router, Route, hashHistory } from 'react-router-dom';
import Ap
浏览 0提问于2018-06-03得票数 0
回答已采纳
我正在尝试在CSS中创建一个网格，但我不确定如何指定整个网格的宽度，以便它只占用屏幕的剩余宽度(减去侧边栏)，因此不应该允许任何水平滚动。下面是我面临的问题的屏幕截图。
如您所见，启用了水平滚动，因为网格太宽了。
下面是我的代码供参考：(我使用的是ReactJS)
.analytics-grid {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr;
row-gap: 10px;
column-gap: 10px;
grid-template-areas: "
浏览 1提问于2020-07-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
