标签: bulma
如果用户在它之外单击，如何防止模式（使用 Bulma CSS 框架）关闭？
Bulma是一个纯 CSS 框架，不提供 JavaScript。话虽如此，我将如何添加 JavaScript 以防止模式组件（特别是卡片变体）在用户点击模式外部时被关闭，或者如果他们敲击ESC键盘则阻止它关闭？
5
推荐指数
推荐指数
1
解决办法
解决办法
7581
查看次数
查看次数
布尔马中心元素垂直
我刚开始用Bulma设置我的博客原型.有一个footer部分有两个等分的列.
我希望这三个项目(Twitter,电子邮件等)在黄色区域中垂直居中.布尔玛有没有特别的课程？
(请参阅codepen.io上的完整示例.)
<footer class="footer" style="background-color: lightpink;">
<div class="columns">
<div class="column has-text-centered-touch" style="background-color: cyan;">
<p>Some copyright stuff...</p>
<p>Templated with <a href="https://bulma.io" target="_blank">Bulma</a>. Published with <a href="https://gohugo.io/" target="_blank">Hugo</a>.</p>
</div>
<div class="column has-text-right" style="background-color: yellow;">
<div class="level">
<div class="level-left"></div>
<div class="level-right">
<a class="level-item" href="#">Twitter Icon</a>
<a class="level-item" href="#">Email Icon</a>
<a class="level-item" href="#">LinkedIn Icon</a>
</div>
</div>
</div>
</div>
</footer>
5
推荐指数
推荐指数
1
解决办法
解决办法
9009
查看次数
查看次数
布尔玛柱移动溢流体
我正在尝试使用 bulma 列，但它们在移动视图中溢出了主体。在下一张图片中，您可以看到屏幕右侧的白色间隙。我检查了一下，身体标签与“番茄”部分的右边框齐平。但是，当列的实例出现时，它会溢出 body 标记并创建水平滚动。
在此先感谢您的帮助！
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" integrity="sha384-3AB7yXWz4OeoZcPbieVW64vVXEwADiYyAEhwilzWsLw+9FgqpyjjStpPnpBO8o8S" crossorigin="anonymous">
<link rel="stylesheet" href="assets/stylesheets/main.css">
<title>Buffalo Wings</title>
</head>
<body>
<div class="bw-hero" style='display: flex; align-items: center; justify-content: center'>
<h1 class='title is-bold' style="color: white">slider tbd</h1>
</div>
<div class="container">
<div class="columns">
<div class="column">
<img src="assets/images/svg/the_chicken_wings_experts.svg" alt="The chicken wings experts">
</div>
<div class="column">
<h2 class="title has-text-centered">SELECCIONA TU PAÍS Y CIUDAD</h2>
<div class="field is-grouped is-grouped-centered">
<div class="control">
<div class="select">
<select> …5
推荐指数
推荐指数
2
解决办法
解决办法
2699
查看次数
查看次数
Bulma 全高布局，中间有可滚动区域
我想创建一个带有顶部导航栏、中间区域和页脚的全高布局。顶部导航和页脚应始终分别位于顶部和底部。我设法创建的布局看起来有点像这样：
我实现了这个：
<section class="hero is-fullheight">
<div class="hero-head">
<the-navbar></the-navbar>
</div>
<div class="hero-body">
<div class="container">
<dashboard/>
</div>
</div>
<div class="hero-foot">
<tab-navigation></tab-navigation>
</div>
</section>
现在的问题是，当我<dashboard/>在 hero-body 中有其他元素（如一长串框）时，全高布局丢失，使站点长于显示高度。如何使 hero-body div 可滚动？我尝试添加，overflow: auto;但这不起作用
5
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
使列填充布尔玛的垂直空间？
我有以下简单的布局（除了textarea在运行时变成代码镜像）：
<div class="columns">
<div class="column is-paddingless" style="background: indigo;">
<textarea id="code-editor"></textarea>
</div>
<div class="column">
</div>
</div>
问题是 - 第一列没有填充页面的垂直空间（在选项卡下方） - 而它只是包装了textarea. 例如：
有没有办法让列填满页面？
5
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
如何使用 bulma 将文本放入 HTML5 中的进度条中？
默认情况下，您在<progress></progress>标签之间放置的内容不会显示。
<progress class="progress" value="15" max="100">15%</progress>我如何才能显示 15%？我使用 Bulma 作为框架。
5
推荐指数
推荐指数
1
解决办法
解决办法
2088
查看次数
查看次数
Bulma 导航栏与主要部分重叠
我试图弄清楚在覆盖 10% 的顶部使用布尔玛的固定导航栏，覆盖 80% 的主要部分和覆盖另外 10% 的底部的导航栏。导航栏有图标和文本。没有设置高度已经存在一些偏差，通过设置高度偏差似乎少了一点，但是容器仍然没有对齐。
<!DOCTYPE html>
<html class="" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body class="has-navbar-fixed-top has-navbar-fixed-bottom">
<header>
<nav class="navbar is-fixed-top message-header has-background-warning">
<a>
<span class="icon is-large"><i class="fas fa-users fa-3x"></i></span>
<span>Members</span>
</a>
<a>
<span class="icon is-large"><i class="far fa-images fa-3x"></i></span>
<span>Photos</span>
</a>
<a>
<span class="icon is-large"><i class="fas fa-map-marked-alt fa-3x"></i></span>
<span>Maps</span>
</a>
<a>
<span class="icon is-large"><i class="fas fa-calendar-alt fa-3x"> </i></span>
<span>Calendar</span>
</a>
</nav>
</header>
<section class="eightyvh has-background-primary">
<div …5
推荐指数
推荐指数
2
解决办法
解决办法
2082
查看次数
查看次数
如何以布尔玛方式垂直和水平居中某些内容？
我想水平和垂直居中内容，我想用“bulma 方式”（不添加额外的 CSS）。我的例子是有效的，但我觉得它是“hacky”。
html,
body,
.container,
.section {
height: 100%;
}
.column {
flex-direction: column;
justify-content: center;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet" />
<section class="section">
<div class="container is-flex">
<div class="column is-flex has-text-centered">
<div class="box">
My content
</div>
</div>
</div>
</section>5
推荐指数
推荐指数
1
解决办法
解决办法
2162
查看次数
查看次数
在 vue.js 中使用 SASS 自定义 Buefy
我是这方面的初学者，我正在努力改变 buefy 元素的风格。特别是buefy选项卡。
在我的组件中，我有这种风格：
<style lang="scss" scoped>
// Import Bulma's core
@import "~bulma/sass/utilities/_all";
// Set your own stuff
$my-primary: red;
$link: red;
$colors: (
"primary": ($min-primary, $primary-invert)
);
$tabs-toggle-link-border-color: red;
$tabs-toggle-link-border-style: red;
$tabs-toggle-link-hover-background-color: red;
$tabs-toggle-link-hover-border-color: red;
$tabs-toggle-link-active-background-color: red;
$tabs-toggle-link-active-border-color:red;
$tabs-toggle-link-active-color: $link-invert !default;
// Import Bulma and Buefy styles
@import "~bulma";
@import "~buefy/src/scss/buefy";
</style>
我的标签格式如下：
<b-tabs type="is-toggle" size="is-medium" expanded>
链接颜色和原色按预期更改。但标签保持其原始颜色。
有两件事我觉得很奇怪：
- 如果我将此样式移动到 App.vue 并删除“范围”-样式不起作用。但是 - 原色和链接颜色变为紫色（不像我预期的那样是绿宝石色，如果我只是从组件中删除 $colors 就会发生这种情况）。我认为添加到 App.vue 的所有样式都适用于所有组件？
- 为什么标签不改变颜色？我弄错了变量吗？我如何找到正确的变量？此处使用的变量位于 bulma/sass/components/tabs.sass 中。
node-sass 和 sass-loader 都安装了。
希望有人能让我感觉更开明:-)
5
推荐指数
推荐指数
1
解决办法
解决办法
3832
查看次数
查看次数
使用 Bulma 设置新的主要字体系列
我正在尝试更新 Bulma 中主要字体系列的变量，但似乎什么也没发生。到目前为止，我所做的是：
- 导入初始变量和函数文件。
- 使用 Google Fonts 导入我想要的字体
- 设置一个名为的新变量
$family-serif: "Grandstander", serif; - 将 更新
$family-primary为等于 的值$family-serif； - 导入布尔玛
@import "../assets/bulma/bulma.sass";
源代码可以在：https : //github.com/jacobcollinsdev/eponym找到，我已经包含了下面的代码片段：
@charset "utf-8";
@import url('../assets/bulma/sass/utilities/initial-variables.sass');
@import url('../assets/bulma/sass/utilities/functions.sass');
@import url('https://fonts.googleapis.com/css2?family=Abhaya+Libre:wght@500;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Grandstander&display=swap');
$family-serif: "Grandstander", serif;
$family-primary: $family-serif;
@import "../assets/bulma/bulma.sass";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/styles.css">
<title>Home | Eponym Mag</title>
</head>
我最近才开始使用 Bulma，并认为我可能对我需要包含的文件等有些混乱，任何见解都表示赞赏。
谢谢！
5
推荐指数
推荐指数
1
解决办法
解决办法
874
查看次数
查看次数