标签: bulma

我有几个 HTML 表隐藏在手风琴面板中，我需要搜索所有表才能找到一行，我是否错过了部署相应面板并突出显示相应行的内容？

这是我的代码：

function testSearch(){
        console.log("testresearch")
        let input = document.getElementById('searchbar').value
        input=input.toLowerCase();
        let x = document.getElementsByClassName('panel');
          
        for (i = 0; i < x.length; i++) { 
            if (!x[i].innerHTML.toLowerCase().includes(input)) {
                x[i].style.display="none";
            }
            else {
                x[i].style.display="list-item";                 
            }
        }
    
    }

<input
    id="searchbar"
    onkeyup="testSearch()"
    type="text"
    name="search"
    placeholder="..."
  /><br />
  <button class="accordion button is-light">A</button>
  <div class="panel" style="">
    <table class="dataframe table is-hoverable is-fullwidth clickable-table">
      <tbody>
        <tr>
          <td>A</td>
          <td>A</td>
          <td>A</td>
        </tr>
      </tbody>
    </table>
  </div>

  <button class="accordion button is-light">B</button>
  <div class="panel" style="">
    <table class="dataframe table is-hoverable is-fullwidth clickable-table">
      <tbody> …

我想创建一个带有顶部导航栏、中间区域和页脚的全高布局。顶部导航和页脚应始终分别位于顶部和底部。我设法创建的布局看起来有点像这样：

我实现了这个：

<section class="hero is-fullheight">
        <div class="hero-head">
            <the-navbar></the-navbar>
        </div>
        <div class="hero-body">
            <div class="container">
                <dashboard/>
            </div>
        </div>

        <div class="hero-foot">
            <tab-navigation></tab-navigation>
        </div>
</section>

现在的问题是，当我<dashboard/>在 hero-body 中有其他元素（如一长串框）时，全高布局丢失，使站点长于显示高度。如何使 hero-body div 可滚动？我尝试添加，overflow: auto;但这不起作用

我有以下简单的布局（除了textarea在运行时变成代码镜像）：

<div class="columns">
    <div class="column is-paddingless" style="background: indigo;">
            <textarea id="code-editor"></textarea>
    </div>
    <div class="column">
    </div>
</div>

问题是 - 第一列没有填充页面的垂直空间（在选项卡下方） - 而它只是包装了textarea. 例如：

有没有办法让列填满页面？

我需要更改 bulma CSS 占位符的颜色。我可以使用下面的代码作为不是 bulma 的正常输入的占位符，

::-webkit-input-placeholder {
  color: blue !important;
}

但它不适用于由 bulma 供电的 buefy 输入字段。我想让你知道我已经为 bulma 编辑设置了 sass 并且它工作正常，但我不知道输入字段类的占位符来切换它。

在 Buefy 导航栏组件项元素有

<b-navbar-item href="/job">
            job
</b-navbar-item>

它呈现标准的ahtml 标签。单击时，页面重新加载。我想在nuxt-link没有重新加载页面的情况下使用Nuxt 标签。

这段代码有效，但我的 css 设计 Bulma 导航栏坏了。

<b-navbar-item >
    <nuxt-link to="/job">
        Job
    </nuxt-link>
</b-navbar-item>

我需要使用 Bulma 框架创建表单，但我在创建布局时偶然发现了输入/选择字段之间的宽度差异。

如下图所示：

如您所见，输入字段（1，插入名称）和选择元素（2，LABelos）之间存在差异，所以我的问题是如何修复选择的宽度以匹配上面输入字段的宽度（1，插入名称）

这是代码：

<br />
<div class="columns">
  <div class="column is-4">
    <div class="columns is-desktop">

      <div class="column is-3">
        <p>
          <label>
                Awesome labelsss
              </label>
        </p>
      </div>
      <div class="column is-7">
        <div class="field">
          <div class="select">
            <select>
              <option>Select dropdown</option>
              <option>With options</option>
            </select>
          </div>
        </div>
      </div>
    </div>
    <div>
      <br />
      <div class="columns is-desktop">
        <div class="column is-3">
          <p>
            <label>
                  Some text
                </label>
          </p>
        </div>
        <div class="column is-7">
          <div class="field is-horizontal">
            <div class="field-body">
              <div class="field">
                <p class="control">
                  <input class="input" type="text" …

我想水平和垂直居中内容，我想用“bulma 方式”（不添加额外的 CSS）。我的例子是有效的，但我觉得它是“hacky”。

这是我取得的最好成绩

html,
body,
.container,
.section {
  height: 100%;
}

.column {
  flex-direction: column;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet" />

<section class="section">
  <div class="container is-flex">
    <div class="column is-flex has-text-centered">
      <div class="box">
        My content
      </div>
    </div>
  </div>
</section>

我有 3 个 Bulma 进度条，我想将每个进度条的值颜色更改为不同。

<progress class="progress" value="15" max="100">15%</progress>
<progress class="progress" value="15" max="100">15%</progress>
<progress class="progress" value="15" max="100">15%</progress>

更改 SCSS 变量$progress-value-background-color会使所有进度条值的颜色相同，这不是我希望发生的。我也不想使用预定义的 Bulma 颜色类。

我正在尝试使用 Bulma 表创建日历，除了一个问题之外，一切正常。我的日历如下所示

您可以看到列宽不均匀（例如，周五的列宽小于周一的列宽），并且不应该是这样，日历的每一天都应该具有相同的宽度。下面是这个的代码片段

<table class="table is-bordered">
        <thead>
          <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
          </tr>
          <tr>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
          </tr>
        </tbody>
      </table>

我不确定如何使用 CSS 或任何其他更好的方法来解决这个问题。如果您能为我指明正确的方向，我将不胜感激。

我目前正在构建一个 npm 组件库，并使用汇总捆绑过程来编译该库以进行分发。该项目的CSS是使用SCSS编写的，但它也依赖于Bulma ，这是一个用SASS编写的CSS框架。

我希望能够将 bulma 源代码与我的自定义 scss 全部捆绑到一个 scss 文件中，然后我可以在其他项目中使用该文件。这样我仍然可以从这些项目中 scss 提供的功能中受益，例如变量和 mixin。

我希望在构建过程中实现自动化，这样我在开发新组件时就不必担心它。我查看了许多用于捆绑 scss 文件的 npm 包，但没有一个包同时支持SASS和SCSS。我也尝试过将我的项目完全转换为 sass，但总体上似乎没有对 sass 捆绑提供任何良好的支持。

例如，我可能有一个 main.scss 文件，如下所示：

@import "~bulma/bulma.sass";
@import "./utils/variables.scss";

它将 sass 和 scss 文件一起导入。这是 sass 编译器支持的东西，我可以将其编译为捆绑的 css 文件，没有任何问题。但似乎不支持捆绑到一个 scss 文件中。

我一直尝试使用的两个主要 NPM 包是：

scss 捆绑和捆绑 scss

scss-bundle很棒，但它似乎没有 SASS 支持，所以这对 Bulma 来说是不行的。

至于bundle-scss，我将项目转换为使用SASS并相应地配置了包，使用的配置如下：

{
  "dest": "dist/bundle.sass",
  "mask": ["src/styles/**/*.sass", "node_modules/bulma/**/*.sass"]
}

据我所知，这应该遍历样式文件夹和 Bulma 依赖项文件夹的所有子目录中的所有文件，并将它们一起编译成一个bundle.sass文件。尽管我更喜欢来自 …