Bulma

Question

我是 bulma 的新手，但一直在尝试用它制作一个简单的网页。

我运行遇到一个令人沮丧的问题，我认为其中一个 classes "button is-large" 强制我页面上的元素内联。

这是正在发生的事情的最小代码演示：

  <div class="column" style="height: 200px">
    <a class="button is-fullwidth" style="height: 100%">
       <p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
       <p class="title">Print Release</p>
    </a>
  </div>

以上代码中的元素将内联显示。

我希望 "a tag" 中的元素相互堆叠。当 "a tag" 有 class "button is-fullwidth" 时，它强制两个元素内联；而如果这个 class 被删除，它们最终会相互重叠，没有问题。

这里 full jfiddle 展示了我为解决问题而采取的不同方法。我尝试了三种不同的方法来让这些元素出现在新行上，但都无济于事。

这只是 "button ..." class 的固有属性吗？我可以在保留新行的同时保留按钮 class 吗？

Answer 1

你给了主播一个 class 按钮和全角

The class button always place content inline

HTML

<a class="btn is-fullwidth" style="height: 100%">
   <p> <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt=""> </p>
   <p class="title">Print Release</p>
</a>

CSS

.btn {
text-align: center;
}

我用自定义 class 名称 btn 更改了 button class 然后我给它一个中心对齐 CSS

Answer 2

class button 使用 flexbox 设置样式。属性 display: flex 使其内容出现 'inline'。你可以了解更多关于 flexbox here and here.

有多种方法可以获得您想要的布局，这里是一种方法：

将 .is-block 修饰符添加到 a.button - 这将覆盖 display 属性，并确保块元素将堆叠。在您的示例中，p 是块元素，img 是 inline 元素。（或者，您可以在 CSS 中通过将 flex-direction: column 添加到您的按钮来更正此问题。）
无需使用内联 CSS 调整 .column 的高度，您可以创建一个新修饰符 class，当您需要固定高度。我已将 is-fixed-height 和 height-200 添加到 .column 并使用一些自定义 CSS 来定义它们。
Bulma 给 .button 一个 height 的 2.25em。您需要使用 100% 覆盖它。同样，您可以创建修饰符 class 并将其添加到按钮（类似于 is-height-100），或者简单地使用 CSS 定位您想要的按钮。这两个选项都比使用内联 CSS 更可取。
您使用的图片太大，按钮下方无法容纳文本。不要在列上使用 height: 200px，而是使用 min-height。如果必须使用200px的height，则需要对图像进行一些调整。让我知道，我可以尝试帮助。

fiddle

.is-fixed-height.height-200 {
  min-height: 200px;
}

.is-fixed-height.height-200 .button {
  height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css" rel="stylesheet"/>
<div class="container">
  <div class="block">
    <div class="columns">
      <div class="column is-fixed-height height-200">
        <a class="button is-block is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
      <div class="column is-fixed-height height-200">
        <a class="button is-block is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
      <div class="column is-fixed-height height-200">
        <a class="button is-block  is-fullwidth">
          <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/30611-200.png" alt="">
          <p class="title">Print Release</p>
        </a>
      </div>
    </div>
  </div>
</div>

Bulma - 按钮 Class 强制内联

Bulma - Button Class forcing Inline

html

css