标签: bulma
响应式 CSS 在移动设备上具有不同的 rem 大小
我正在使用 Bulma CSS 框架，但我根本无法让我的网站像他们的主页一样具有响应性。
该网站是 活的。我的 < html > 具有相同的字体大小，并且我的 dom 结构与 bulma 的主页相同。然而我的在手机上看起来很糟糕。
这是我的 HTML 页面的片段：
<html>
<body>
<section class="hero">
<div class="hero-body has-text-centered">
<div class="container">
<div>
<h1 class="title">Tiny Text!</h1>
</div>
</div>
</div>
</section>
</body>
</html><html class="route-index">
<body class="layout-default" style="zoom: 1;">
<section class="hero is-medium">
<div class="hero-body has-text-centered">
<div class="container">
<h1 class="title">Somehow big text?</h1>
</div>
</div>
</section>
</body>
</html>布尔玛的页面：
我的页面：
您可以通过 chrome 上的开发人员工具将两个站点的主页上的视口设置为移动设备来测试这一点。
推荐指数
解决办法
查看次数
使用bulma和webpack一起使用
我有这个非常简单的webpack项目,我现在也想使用bulma一个css框架.
我安装了包,npm i bulma并尝试将其包含在我的app.js-file中,使用以下剪切失败:
import bulma from '~bulma/bulma.sass';
我也尝试使用特定的sass部分,这也没有用:
import bulma from '~bulma/sass/base/_all';
你能帮助我解决这个问题吗？或者让我指出正确的方向？
推荐指数
解决办法
查看次数
Bulma 的导航栏错误无法连接到 Vue.js 2 中的菜单项
我正在尝试为我的应用程序实现一个导航栏，其前端是使用 Vue 2.0 和 Bulma 构建的。它在桌面上运行良好，但在较小的屏幕上显示汉堡图标但不显示任何元素。它只是现在。
<template>
<div class="container is-fluid">
<div>
<nav class="navbar is-dark">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img alt="K R O N O S" height="100px">
</a>
<div class="button navbar-burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-end">
<div class="navbar-item">
<a class="" href="#"> Docs </a>
</div>
<div class="navbar-item ">
<a class="" href="#"> Report </a>
</div>
<div class="navbar-item">
<a class="">More</a>
</div>
<div class="navbar-item">
<a class="">Logout</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</template>
<script>
document.addEventListener('DOMContentLoaded', function () { …推荐指数
解决办法
查看次数
Bulma - 如何使文本和图像内联或彼此相邻？
我在我的项目中使用 Bulma。
基本上，我正在尝试height: 25em使用 Bulma将 text 和 image( ) 内联。但它没有发生。
到目前为止，我试过这个：
.img-cont {
width: 50%;
float: left;
}
img {
height: 25em;
}
.clearfix {
clear: left;
}
.content {
float: right;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" type="text/css" rel="stylesheet">
<div class="container is-info">
<div class="img-cont">
<img src="https://i.imgur.com/Pyp4DwX.png" alt="">
</div>
<div class="clearfix"></div>
<div class="content has-text-centered">
<span class="title">MEDAL</span><br>
<span class="subtitle">Loren Ipsum Dolar Sit Amet.</span>
</div>
</div>正如您所看到的，文本内容不会垂直居中，而是始终位于底部。
那么，我该如何解决这个问题并实现我想要的外观呢？
推荐指数
解决办法
查看次数
Font Awesome无法使用vue正确更新
我正在尝试使用超棒的字体和布尔玛制作一个可点击的“星形”图标，在Vue中的常规样式和实体样式（fas和far）之间切换，要实现这一点，我需要以下组件：
<template>
<span v-if="isStarred" class="icon starred config-icon clickable-text" @click="unstar">
<i class="far fa-star" title="Unstar Ranking"/>
</span>
<span v-else class="icon unstarred config-icon clickable-text" @click="star">
<i class="fas fa-star" title="Star Ranking"/>
</span>
</template>
该值isStarred正在正确更新，并且span元素也在相应更新。但是，i带有图标的元素直到我完全重新加载页面后才会更新。
我可以用v-show代替，v-if但是我不明白为什么这不起作用。
推荐指数
解决办法
查看次数
如何在导航栏 bulma 中将带有徽标的文本居中
我试图将导航栏中的文本居中，徽标位于导航栏项目之间，但是，我只能将徽标作为品牌形象居中。
这是我的代码：
<a role="button" class="navbar-burger" aria-label="menu" data-target="navMenu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<nav class="navbar is-white">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<img src='img/logo.png' style="width: 100px;">
</a>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a href="#" class="navbar-item nav-text">Paslaugos</a>
<a href="#" class="navbar-item nav-text">Kainos</a>
<a href="#" class="navbar-item nav-text">DUK</a>
<a href="#" class="navbar-item nav-text">Apie Mus</a>
</div>
</div>
</nav>
css
.navbar .navbar-brand {
text-align: center;
display: block;
width: 100%;
}
.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
display: inline-block;
}
任何帮助将不胜感激我已经花了太多时间在这上面。
推荐指数
解决办法
查看次数
在 Bulma 上水平居中项目的最佳方法
我想要一个五分之三列宽的部分，并且它会居中。起初，当我只有“部分”时，内容是水平居中的，但它占据了整个屏幕的宽度。所以我添加了一个列的父 div，其中一列是五分之三。现在我有一个五分之三宽但不居中的部分，那么最好的方法是什么？
.section{
border: 1px solid;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="columns">
<div class="column is-three-fifths">
<section class="section">
<div class="container">
<figure class="image is-128x128">
<img src="https://bulma.io/images/placeholders/256x256.png">
</figure>
</div>
</section>
</div>
</div>推荐指数
解决办法
查看次数
如何将元素居中放置在 Bulma 框架中的磁贴内
我正在为我的网页的 css 使用 Bulma 框架。我正在使用磁贴功能来设计我的页面。我似乎无法找到如何将元素居中放置在 tile 中。
我在 bulma.css 文件中编写了一个“中心”类，如下所示：
.center{
left : 40%;
right : 20%;
}
这似乎适用于我正在导入的图像：
<div class="tile is-ancestor">
<div class="tile is-parent">
<div class="tile is-child ">
<figure class="image is-64x64 center">
<img src="/static/img/my_image.png" alt="" >
</figure>
<!---more code---->
</div>
</div>
</div>
但同样不适用于图像正下方的表单（仍在磁贴内：
<form class="center" action="{{url_for('displayGraph')}}" method="post">
<input class="center" style="width:80%;font-size:12pt;" type="text" name="name" value="" placeholder="How can I help you?">
<br>
<br>
<div class="center">
<input type="submit" name="submit" value="Ask away!">
</div>
</form>
不知道该怎么办。有人可以帮帮我吗？
推荐指数
解决办法
查看次数
如何在 Fulma/Fable 中插入自定义 HTML 标签？
我正在使用 Fable (2) + Fulma (1.1) + Elmish (2) 作为 Web UI，我想添加一个 Select 下拉列表，如 Bulma here 中所述。它<option>为项目使用了HTML 标记，但我在 Fulma 库中的任何地方都找不到它。在这种情况下，如何将任意标签写入我的视图？
推荐指数
解决办法
查看次数
将 MaterialCSS 或 Bulma 的 Sass 版本集成到 Svelte 中
我正在寻找有关如何将 Materializecss 或 Bulma 的 sass 版本集成到 Svelte 的说明。我的目标是能够将单个组件（如按钮组件或卡片组件）导入到单个 svelte 组件中。此外，我希望能够利用 Bulma 提供的 sass 变量。
我已经寻找了一些关于如何做到这一点的教程，但我还没有找到任何东西。
有任何想法吗？
推荐指数
解决办法
查看次数