标签: bulma

我正在使用Bulma 0.4.0,尽管答案可能与Bulma本身无关.

如何将列高设置为等于其他？(见下面的截图)

编辑:具有更多显示实际行为的文本的codepen:https://codepen.io/anon/pen/vmKVbx

预期行为:

实际行为:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div class="columns">
  <div class="column">
    <p class="notification is-info">First column</p>
  </div>
  <div class="column">
    <p class="notification is-success">Second column</p>
  </div>
  <div class="column">
    <p class="notification is-warning">Third column</p>
  </div>
  <div class="column">
    <p class="notification is-danger">Fourth</p>
  </div>
</div>

我正在使用 bulma 框架，所有内容都在左侧，我如何将内容集中在页面上？例如，此图像在左侧。

<section class="section">
  <div class="container">
    <div class="column">
      <figure>
        <img src="/assets/images/norris-lake.jpg" alt="Melton Hill Lake">
      </figure>
    </div>
  </div>
</section>

我试图在这里使用文档后使用bulma图标,但图标没有显示:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
 
 <div>
  <span class="icon">
    <i class="fa fa-home"></i>
  </span>
  <span>ICON</span>
 </div>

还看到这里的小提琴,可能是什么问题？

我正在使用 bulma，我是 bulma 的新手。

我尝试创建两行，但内容并排放置，并且没有按预期在另一行之上。

如何使用 bulma 创建两行？

我尝试使用 class="row"

这是我的代码如下：

  <div class="row">
    <h1 class="title is-size-1">
        About
    </h1>
  </div>

  <div class="row">
    <span class="subtitle is-size-4">
      long text.
    </span>
  </div>


</div>

回答自己：我确实使用：<article class="tile is-child notification is-white">

如何在移动设备或平板电脑上更改列的堆栈顺序？

例如,它在宽屏幕上是水平的,但是当它缩小时我想要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>
  <div class="column box">
    2
  </div>
</div>

我正在使用Bulma CSS框架，特别是我正在尝试使其中的表具有响应性。

我尝试给它一个width: 100%;并申请，overflow-x: auto;但似乎没有用。这是演示：http : //104.236.64.172 : 8081/#/pricing

码：

<div class="panel-block">
    <table class="table is-bordered pricing__table">
        <thead>
            <tr>
                <th>Travellers</th>
                <th>Standard</th>
                <th>Delux</th>
                <th>Premium</th>
                <th>Luxury</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Per Person Cost</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr>
            <tr>
                <td>
                    Extra Person <br>
                    (> 12 yrs)
                </td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr>
            <tr>
                <td>
                    Extra Child <br>
                    (> 12 yrs)
                </td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
                <td>? 70,523.90</td>
            </tr> …

我按照文档示例并将其包含在一个media对象中：

<figure class="image is-128x128">
  <img src="https://bulma.io/images/placeholders/128x128.png">
</figure>

card我将其用作显示多个元素的一部分。

问题是，当上传的图像不是平方的（意味着比例不是 1:1）时，图像会溢出容器，从而有效地破坏布局。

布尔玛有什么办法解决这个问题吗？

喜欢布尔玛的流动。只是想让我的图像更明显，它们可以在单击时执行操作。

我可以用 vue.js 绑定一个样式，比如

<figure class="image is-128x128">
<img v-bind:src="currentTrack.coverURL"   
@mouseover="hover = true" 
@mouseleave="hover = false"
@click="playAudio()" 
:style="hover ? {opacity:0.5} : {opacity:1}" alt=""/>
</figure>

但是鼠标指针并没有变成可能有助于它看起来更像按钮的东西......想知道是否有一个简单的布尔玛属性我可以添加

提前致谢！

我在尝试使用 Bulma 库创建一个包含一些对齐内容的 3 个盒子的响应式网格时遇到了问题。如果可能的话，我想让它仍然保持盒子内的水平。

任何帮助，将不胜感激。

这是我期望的结果：

但是当减小宽度时，它会中断：

这是我正在使用的代码：

<div className="columns sub">
          {this.props.options.map(option => (
            <div className="column is-one-third" key={option.id}>
              <div
                name={option.id}
                className={
                  `box ` +
                  (this.props.optionToBeChosen === option.id
                    ? "box-is-active"
                    : "")
                }
                onClick={() => this.props.onClick(option.id)}
              >
                <div className="level is-mobile">
                  <div className="level-item level-left">
                    <div>
                      <p className="box-text-title">{option.title}</p>
                      <p className="box-text-small">{option.description}</p>
                      <p className="box-text-small">{option.description2}</p>
                    </div>
                  </div>

                  <div className="level-item level-right has-text-right">
                    <div>
                      <p className="box-text-demo">{option.cta}</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

所以我通过 CDN 使用 Bulma，有一个<h2>标签，<button>其中包含一个标签：

<h2 class="title is-size-2-mobile is-3 has-text-white">Step 1: Pick which Cards and/or Cheatsheets youwant to learn from the <button class="button mt-10 has-background-success has-text-info has-text-centered is-vcentered ml-10 mr-10">Cheatsheets</button> in the menu.</h2>

但这就是它呈现的内容：

我需要按钮上的哪些类才能使其与文本垂直对齐？