Question

bulma中是否有开箱即用的修饰符，可更改平板电脑上输入/按钮的大小？

<div class="field has-addons">
  <div class="control is-fullwidth">
    <input class="input is-fullwidth" type="text">
  </div>
  <div class="control">
    <button class="button is-primary">Search</button>
  </div>
</div>

JSFiddle：https://jsfiddle.net/AlexZeitler/683g70xt/

Answer 1

布尔玛使用column based grid，可用于控制由

发起的元素的响应性

<div class="columns">

然后通过使用类似的类来控制列大小：

<div class="column is-tablet-6">

由于您使用的是附加组件，因此该组的整体规模将受到影响，而不会单独影响每个项目。因此，您可能需要检查您的后端语言，以查看用户是否在移动设备上。对于php，我建议使用Mobile Detect，然后您可以执行以下操作：

<? if($detect->isTablet()): ?>
    <div class="columns">
         // Do tablet view
    </div>
<? else: ?>
    // Do Normal view
<? endif; ?>

否则，您将只想在网格和样式中适当地标记，以使其看起来像是输入组。

bulma：平板电脑上的输入/按钮大小

1 个答案: