标签: bulma

我用 vue-cli 启动了一个项目，然后运行

npm bulma install

并在我的 App.vue 中导入了 bulma

@import "../node_modules/bulma/bulma.sass";
@import '../node_modules/bulma/sass/utilities/initial-variables.sass'

但我正在使用他们的课程并且不起作用。

<div class="columns">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
<div class="column">4</div>
<div class="column">5</div>

我有一个使用 Bulma 框架的简单表单。我的输入宽度不一致并且找不到补救措施。https://jsfiddle.net/onzpum90/当标签很长时似乎会发生这种情况。如果我保留短标签，问题就消失了。为什么标签会影响输入宽度？可能是我不熟悉的flexbox问题。有人知道解决方案吗？

<form action="">
<div class="field">
<div class="field-body">
  <div class="field">
    <p class="control is-expanded">
      <label class="label">A very long label for a form</label> 
      <input type="text" name="" value="" class="input ">
     </p>
  </div> 
  <div class="field is-grouped">
    <p class="control is-expanded">
      <label class="label">Email</label>
      <input type="email" name="email" value="" class="input ">
    </p>
  </div>
  </div>
 </div>
 <div class="field is-horizontal">
<div class="field-body">
  <div class="field">
    <p class="control is-expanded">
      <label class="label">Short Label</label> 
      <input type="text" name="" value="" class="input ">
     </p>
  </div> 
  <div class="field is-grouped">
    <p class="control is-expanded">
      <label class="label">Email</label>
      <input …

我的表单中的下拉输入字段有问题。我在我的 Rails 应用程序中使用 Bulma。这是代码

<!-- Date of birth in _form.html.erb -->

 <div class="field">
 <label class="label">Date of birth</label>
 <p class="control">
 <span class="select">
 <%= f.date_select :date_of_birth, {order:[:day,:month,:year], start_year: 1975} %>
 </span>
 </p>
 </div>

我得到以下结果：

如您所见，下拉元素（日期、月份和年份）未对齐，但它们折叠到下一个字段输入中。有什么建议？谢谢

我想在单击按钮但不起作用时显示模式。这里是代码：

    <button class="button is-warning is-pulled-right" onclick="refs.modalEdicion.open()">
        <span>Editar</span>
    </button>
    <div class="modal" id="modalEdicion">
        <div class="modal-background"></div>
        <div class="modal-content">
            <p class="image is-4by3">
            <img src="https://bulma.io/images/placeholders/1280x960.png" alt="">
            </p>
        </div>
        <button class="modal-close is-large" aria-label="close"></button>
    </div>

我已经开始使用Bulma 0.7.1和VueJs 2.5.17。现在，我正在使用 Vue 路由器组件，并且我希望每当我位于链接表示的“页面”上时，将导航栏中的按钮设置为活动状态。

我的代码如下

<template>
    <div id="app">
        <nav class="navbar" role="navigation" aria-label="main navigation" id="nav">
            <div class="container">
                <div id="navMenu" class="navbar-menu">
                    <div class="navbar-end">
                        <a class="navbar-item is-active">
                            <router-link to="/" exact>Home</router-link>
                        </a>
                        <a class="navbar-item">
                            <router-link to="/about" exact>About</router-link>
                        </a>
                        <a class="navbar-item">
                            <router-link to="/project" exact>Project</router-link>
                        </a>
                    </div>
                    <div class="navbar-end">
                    </div>
                </div>
            </div>
        </nav>

        <router-view/>

    </div>
</template>

我知道路由器组件使用类router-link-active来标记活动链接。但布尔玛可能需要is-active应用于当前按钮的类。

我应该如何自动化这个？我读过，也许我应该将类绑定is-active到router-link-active，但我尝试过：

let routes = ...

new VueRouter({
  mode: "history",
  routes,
  linkActiveClass: "is-active"
});

并没有奏效。

任何提示真的很感激。

问题说明了一切，但我在 Buefy 中有 3 个选项卡，前两个（摘要和详细信息）我已经涵盖并按预期正常工作，但第三个选项卡是一个注销按钮，因此当我单击它时，我想触发一个方法警报（””）。

我的 buefy 标签只是来自这里的标准页面，看起来像：

    <b-tabs type="is-toggle" expanded>
        <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
        <b-tab-item label="Music" icon="library-music"></b-tab-item>
        <b-tab-item label="Logout" icon="logout"></b-tab-item>
</b-tabs>

我试过在 b-tab-item 中点击一下，但这没有用，文档说有一个事件：

input   Triggers when tab is clicked    index: Number

但我不知道如何捕获第三个选项卡已被单击以触发一些代码。

布尔玛 CSS 框架

我正在使用布尔玛的网格系统来制作柱块。例如，我有 4 个彼此相邻的 div，每个 div 都有列 is-3 is-offset-0 作为其类。我的问题是如何在平板电脑 2x2 和移动设备 1x1 上显示这些 div？移动设备可以工作，但我无法在平板电脑上工作。在图片中，您可以看到 4 列彼此相邻，这就是我在台式机上想要的，但仅在平板电脑上我希望它们每行显示 2 列。

有谁知道如何做到这一点？

下面是我的代码：

<b-table :data="sortTeachersAndPoints(topTeachers)" :columns="topTeachersColumns" :mobile-cards="false" @click="clickTeacher(data)"></b-table>

除了部分之外，上面的所有内容都运行良好clickTeacher(data)。我想做的是将所选行的数据传递给clickTeacher但是（可以理解），Property or method "data" is not defined on the instance单击任何行时我收到此错误。

那么实际上我应该写什么来将所选行的数据传递给clickTeacher？

这是我要复制的字体样式。它是Open sans字体系列，字体大小14px，字体粗细300

这就是我迄今为止所取得的成就。不要介意间距，但我在这里应用的字体样式与上面相同。但正如你所看到的，我的主要问题是字体粗细更粗，它看起来不像我上面的例子中的 font-weight:300

我不确定这里发生了什么。顺便说一下，我尝试复制字体样式的原始网站是基于 bootstrap 的，而我当前正在研究的字体样式是 buefy 或 bulma。

因此，如果我尝试设置字体粗细，它只能应用大小 600 和 800。我的目标是将其设置为 300，这样它看起来应该与我正在复制的网站相同。

我还尝试了 buefy/bulma 排版类助手（has-text-weight-light、has-text-weight-bold），但它只能变得粗体而不是更轻。我还读过有关导入来自谷歌字体的 open sans 字体的信息，我只需选择我想要的字体粗细，但我还没有这样做，因为我试图保留代码中已有的内容，我不这样做据我所知，在我们的代码库中没有看到任何字体的导入，但是 open sans 工作得很好，只是字体粗细不行。

我想将我的内容水平放在Bulma的列中.

这是一个例子:

http://prntscr.com/hooo8l

我想把这些'class="column is-2"'放在columns'div中.

这是我的代码如何开始:

<div class="columns is-vcentered">
    <div class="column is-three-fifths is-offset-one-fifth has-text-centered">
        <div class="columns is-desktop is-vcentered">
            <div class="column is-2">
                    <button mat-raised-button color="primary" (click)="initTimer()">
                        <mat-icon>play_arrow</mat-icon>
                        Start Timer
                    </button>
            </div>

我想把里面的按钮置于-2的中心位置.

任何帮助,将不胜感激.谢谢!