开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在Bulma级别组件中实现分词，并设置左右等宽？

在Bulma级别组件中实现分词，并设置左右等宽，可以通过以下步骤来实现：

首先，确保你已经引入了Bulma框架的CSS文件，以便使用其样式和组件。
在HTML文件中，创建一个包含分词功能的输入框组件。可以使用Bulma的control和tags类来实现。例如：

<div class="control">
  <div class="tags">
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
    <span class="tag">Tag 3</span>
  </div>
</div>

接下来，为了实现左右等宽，可以使用Bulma的is-grouped类来将标签组合在一起，并使用is-grouped-centered类来使其居中对齐。例如：

<div class="control">
  <div class="tags is-grouped is-grouped-centered">
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
    <span class="tag">Tag 3</span>
  </div>
</div>

如果你想要实现分词的功能，可以使用Bulma的is-flex类来使标签可以自动换行，并使用is-align-items-center类来使标签垂直居中对齐。例如：

<div class="control">
  <div class="tags is-grouped is-grouped-centered is-flex is-align-items-center">
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
    <span class="tag">Tag 3</span>
  </div>
</div>

最后，你可以使用Bulma的is-expanded类来使标签组件水平填充其父容器的宽度，实现左右等宽的效果。例如：

<div class="control">
  <div class="tags is-grouped is-grouped-centered is-flex is-align-items-center is-expanded">
    <span class="tag">Tag 1</span>
    <span class="tag">Tag 2</span>
    <span class="tag">Tag 3</span>
  </div>
</div>

这样，你就可以在Bulma级别组件中实现分词，并设置左右等宽了。

关于Bulma的更多信息和使用方法，你可以参考腾讯云的Bulma相关产品和产品介绍链接地址：Bulma相关产品和产品介绍链接地址。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

CSS 框架 Bulma 教程

Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。

03

CSS 框架 Bulma 教程

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。有了它，即使完全不懂 CSS，也可以轻而易举做出美观的网页。 📷 我要感谢 100offer 对我提供赞助。100offer 是国内第一流的人力资源网站，本文结尾有他们的简介，最近想换工作的朋友可以看一下。一、简介 Bulma 框架最大的特点，就是简单好用。所有样式都基于class，只需为 HTML 元素指定cl

04

提名推荐！15个2019年最佳CSS框架

开发网站或web应用时，网页开发工程师往往都需要编写CSS，如果每个项目都是从0开始，将会花费大量的时间和精力，并且还会处理很多重复性工作。

01

为Web开发者准备的10个最新工具

Web开发设计是一个很有前途的职业。然而，这其中也有许多挑战。现在的企业和品牌正在朝网络进军。这给了web开发者非常多的机会来展示他们的技能，并在他们的职业上取得成功。然而，随着web开发需求的不断增长，web开发人员的数量也越来越多。这就是为什么这一领域的竞争开始变得愈演愈烈。但好消息是，如果你有天赋和意愿，那么你总能找到新的方法来创造独特的设计和想法。

03

推荐一款轻量化、易用的css框架bulma.css

最大的特点:简单好用提供二十多种常用组件，比如表单、表格、图标、面包屑、菜单、导航、Modal 窗口等等。简单的网站，可以不用写任何 CSS 代码。

01

13个帮你提高开发效率的现代CSS框架[每日前端夜话0x67]

本文将向你介绍一系列顶级CSS框架。有些人可能听说过，也可能对有些人是全新的。但它们都提供了各种有用的先进功能，可以改善你的工作流程。开始吧！

04

当前 GitHub 上排名前十的热门 Vue 项目

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。通过基础的 24 分栏，迅速简便地创建布局。

02

nuxt vue 引入 bulma jquery

1.引入 jquery npm install --save jquery // cnpm install --save jquery home.vue <template>

</template> import $ from 'jquery' // this is necessary. export default { // ... mounted () {

04

2018年十大轻量级的CSS框架为构建快速网站

如果你正在寻找一个新的CSS框架为你的下一个前端开发项目，请阅读一个开发人员对一些流行的选择的评论。

02

2018年九个很受欢迎的vue前端UI框架

最近在逛各大网站，论坛，SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，小编自己也趁着这个大前端的热潮，着手学习了一段时间的Vue.js，目前用它正在做自己的公司项目。

03

CSS框架

简单地说，就是一些事先写好的css，你只需要给你的html元素加上一些特定的类，就可以快速的得到一些想要的效果。就是它开发了一套现成的CSS样式，包括排版布局、按钮、表单、等，你只需要按照它的规则用好类名，这样可以方便团队快速开发Web站点，减轻前端设计师的工作。有名的框架有Twitter的Bootstrap、Foundation、960gs、以及Semantic UI等。

02

使用 C# (.NET Core) 实现模板方法模式 (Template Method Pattern)

本文的概念内容来自深入浅出设计模式一书. 项目需求有一家咖啡店, 供应咖啡和茶, 它们的工序如下: 咖啡: 茶: 可以看到咖啡和茶的制作工序是差不多的, 都是有4步, 其中有两步它们两个是一样的,

04

巧了，敢不敢跟我撸Vue

本文编辑 : Jack 风编程工具 : Vscode 阅读时长 : 6分钟

02

Vue PC端框架

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库中文文档 | github地址

02

vue UI 框架

（1）Element 饿了么 vue 2.0后台UI框架 (Star:18382)

02

如何在Debian 9上使用mdadm创建RAID阵列

该mdadm实用程序可用于使用Linux的软件RAID功能创建和管理存储阵列。管理员可以非常灵活地协调各自的存储设备，并创建具有更高性能或冗余特性的逻辑存储设备。

04

如何在Ubuntu 18.04上使用mdadm创建RAID阵列

该mdadm实用程序可用于使用Linux的软件RAID功能创建和管理存储阵列。管理员可以非常灵活地协调各自的存储设备，并创建具有更高性能或冗余特性的逻辑存储设备。

05

Github上10 个优秀的后台控制面板

Web 开发中几乎的平台都需要一个后台管理，但是从零开发一套后台控制面板并不容易，幸运的是有很多开源免费的后台控制面板可以给开发者使用，那么有哪些优秀的开源免费的控制面板呢？

02

10 个开源项目

基于 Angular 2, Bootstrap 4 和 Webpack 的后台管理面板框架。

03

程序员接私活必备的 10 个开源项目！

基于 Angular 2, Bootstrap 4 和 Webpack 的后台管理面板框架。

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭