Question

我是bulma的新手，但一直在努力制作一个简单的网页。

我遇到了一个令人沮丧的问题，我相信其中一个类＆＃34;按钮是 - 大＆＃34;迫使我页面上的元素内联。

以下是对正在发生的事情的最小代码演示：

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

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

我想要＆＃34;标签内的元素＆＃34;堆叠在一起。当＆＃34; a标签＆＃34;有类＆＃34;按钮是全宽＆＃34;它迫使这两个元素内联;而如果这个课程被删除，他们将最终在彼此之上没有问题。

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

这只是＆＃34;按钮的固有特性......＆＃34;类？我可以保留按钮类同时保持新行吗？

Answer 1

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

有几种方法可以获得所需的布局，这是一种方法：

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

fiddle

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

var stringToBeReplaced = "percentage";

$("input").keyup(function(){

   var str = $("#textarea").val().replace(stringToBeReplaced, $(this).val());
   
    $("#textarea").val(str);
    stringToBeReplaced = $(this).val();
    
});

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

我已使用自定义类名button更改了btn类，然后我将其与CSS中心对齐

布尔玛 - 按钮类强制内联

2 个答案: