Bulma - 按钮类强制内联

Question

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

我遇到了一个令人沮丧的问题，我认为“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 标签”内的元素相互堆叠。当“a tag”具有类“button is-fullwidth”时，它会强制两个元素内联；而如果这个类被删除，它们最终会相互叠加，没有问题。

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

这只是“按钮...”类的固有属性吗？我可以在保留新行的同时保留按钮类吗？

Answer 1

button 类使用 flexbox 设置样式。属性display: flex 使其内容显示为“内联”。您可以了解更多关于 flexbox here 和 here 的信息。

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

1. 将.is-block 修饰符添加到a.button - 这将覆盖display 属性，并确保块元素可以堆叠。在您的示例中，p 是块元素，img 是 inline 元素。 （或者，您可以在 CSS 中通过将 flex-direction: column 添加到您的按钮来更正此问题。）

2. 您可以创建一个新的修饰符类，而不是使用内联 CSS 调整 .column 的高度，当您需要固定高度时可以将其添加到列中。我在.column 中添加了is-fixed-height 和height-200，并使用了一些自定义CSS 来定义它们。

3. 布尔玛给.button 一个height 的2.25em。您需要使用100% 覆盖它。同样，您可以创建一个修饰符类并将其添加到按钮（类似于is-height-100），或者简单地使用 CSS 定位您想要的按钮。这两个选项都比使用内联 CSS 更可取。

4. 您使用的图像太大，无法让文本适合按钮下方。不要在列上使用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>

Answer 2

你给了锚一类按钮和全角

button 类总是将内容内联

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;
}

我已经用自定义类名 btn 更改了 button 类，然后我给它一个与 CSS 对齐的中心