标签: bulma
Bulma：如何定义移动设备上的堆栈顺序
我正在试用Bulma flexbox css 框架- 到目前为止它非常整洁！我发现的唯一障碍是我似乎无法设置移动设备的显示顺序。
<div class="columns">
<div class="column foo">Foo</div>
<div class="column bar">Bar</div> // Would like this to be first on small deviecs
</div>
编辑
这是我的 css 的样子：
body, html {
background-color: blue;
}
.foo { order: 2; }
.bar { order: 1; }
@media only screen and (min-width: 769px) {
body, html {
background-color: red;
}
.foo { order: 1; }
.bar { order: 2; }
}
4
推荐指数
推荐指数
1
解决办法
解决办法
3387
查看次数
查看次数
如何使用 Bulma CSS 框架防止列溢出模态
这个关于 codepen 的最小示例充分说明了这个问题
然而，重申一下：Bulma CSS 框架提供了一个列容器和一个模态元素。如果一个放在另一个里面，如以下完整代码所示：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>
<body>
<div class="modal is-active">
<div class="modal-background"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div id="my-columns" class='columns is-mobile'>
<div class='column'>
<button class='button is-primary'>Some Button</button>
</div>
<div class='column'>
<button class='button is-primary'>Some Button</button>
</div>
<div class='column'>
<button class='button is-primary'>Some Button</button>
</div>
<div class='column'>
<button class='button is-primary'>Some Button</button>
</div>
<div class='column'>
<button …4
推荐指数
推荐指数
1
解决办法
解决办法
3316
查看次数
查看次数
使用 Bulma 将下拉列表附加到文本输入
我来自语义用户界面，我正在尝试做同样的事情
所以这是我的布尔玛代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<div class="field has-addons">
<div class="control">
<input class="input" type="text" placeholder="Find domain">
</div>
<div class="control">
<div class="select">
<select>
<option>.com</option>
<option>.edu</option>
</select>
</div>
</div>
</div>它看起来像这样
我想知道是否有人知道如何将下拉列表的样式设置为语义的 ui？Bulma 有没有办法更改选择输入和背景的图标，或者我必须编写自己的 css？
4
推荐指数
推荐指数
2
解决办法
解决办法
4285
查看次数
查看次数
Nuxt Bulma 应用程序无法访问 SCSS 变量
我创建了一个Nuxt包含 Bulma的应用程序，并希望访问/覆盖我.vue文件中的 Bulma 变量。我已经按照此处的说明进行操作，这些说明似乎与我在其他几个位置找到的内容相匹配，但是在尝试访问文件中的$primary变量时仍然出现错误.vue。
这是我的assets/css/main.scss文件：
@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/bulma";
我的nuxt.config.js模块部分：
modules: [
['nuxt-sass-resources-loader', './assets/css/main.scss']
],
还有我的.vue文件：
@import "~bulma/sass/utilities/_all.sass";
@import "~bulma/bulma";
这是终端中的错误消息：
Module build failed (from ./node_modules/sass-loader/lib/loader.js): friendly-errors 11:51:52
color: $primary;
^
Undefined variable: "$primary".
in /Data/dev/GIT/Homepage/source/pages/about/index.vue (line 16, column 12)
friendly-errors 11:51:52
@ ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/about/index.vue?vue&type=style&index=0&lang=scss& 4:14-384 14:3-18:5 15:22-392
@ ./pages/about/index.vue?vue&type=style&index=0&lang=scss&
@ ./pages/about/index.vue
@ ./.nuxt/router.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js …4
推荐指数
推荐指数
1
解决办法
解决办法
2288
查看次数
查看次数
如何缩短布尔玛输入？
是否可以缩短布尔玛输入宽度？
正如我在他们的文档中看到的那样，有一个is-small参数，但它只会使字体和高度变小。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.8.2/css/bulma.css" integrity="sha256-8BrtNNtStED9syS9F+xXeP815KGv6ELiCfJFQmGi1Bg=" crossorigin="anonymous" />
<div class="container">
<div class="control has-icons-left has-icons-right">
<input class="input is-small m-r-5" type="text" placeholder="Exxxxx">
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
<span class="icon is-small is-right">
<i class="fa fa-check"></i>
</span>
</div>
</div>正如我们在下面的屏幕截图中看到的，它通过容器传播：
我想将其宽度从 100% 缩短到大约 33%
4
推荐指数
推荐指数
1
解决办法
解决办法
9740
查看次数
查看次数
What's the best way to put two inputs side by side in a form using Bulma CSS?
I just started using Bulma to style my site and am having a hard time figuring out whether the framework supports putting two form fields side-by-side. The best example would be first and last name of a user.
Bulma's form group looked promising but it doesn't seem to work if you want two separate fields.
I also started using the grid (columns and column classes) but it got messy with spacing.
Here's what I'm trying to do (the first …
4
推荐指数
推荐指数
3
解决办法
解决办法
4177
查看次数
查看次数
英雄页脚不在页面底部
我正在使用Bulma CSS框架来设计网页样式。
好吧，它的工作原理相当不错，但是当我尝试在页面上添加页脚时，它并没有移到底部。
我需要为此制作自己的CSS还是HTML代码本身的问题？
码：
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-three-quarters">
<nav class="panel">
<p class="panel-heading">
Category #1
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
<nav class="panel">
<p class="panel-heading">
Category #2
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
<nav class="panel">
<p class="panel-heading">
Category #3
</p>
<div class="panel-block">
<p>Test descriptie</p>
</div>
</nav>
</div>
<div class="column">
<nav class="panel">
<p class="panel-heading">
Laatste statistieken
</p>
<div class="panel-block">
<p>Hier komen de URL's te staan, in een lijst</p>
</div>
</nav>
</div>
</div>
</div>
</div> …3
推荐指数
推荐指数
3
解决办法
解决办法
5134
查看次数
查看次数
Bulma CSS-输入字段中的按钮
我正在使用布尔玛框架，如何将Button与输入字段移到同一行？，看起来输入字段是全角
我的代码：
<div class="container">
<div class="field">
<div class="control has-icons-left has-icons-right">
<input type="text" class="input is-info is-large" placeholder="Input number in seconds">
<span class="icon is-medium is-left">
<i class="fa fa-futbol-o"></i>
</span>
</div>
</div>
<a class="button is-info">GO</a>
结果结果图像
3
推荐指数
推荐指数
1
解决办法
解决办法
5682
查看次数
查看次数
如何将导航栏居中？
我以前看过这里，但没有任何实际效果。我正在使用Bulma Framework，我相信这是闻所未闻的，但是我希望您能帮助我将品牌链接集中在导航栏上。这就是我现在所拥有的：
.navbar {
background-color: #0a0a0a;
color: white;
height: 9%;
}
.navbar .navbar-brand > .navbar-item,
.navbar .navbar-brand .navbar-link {
color: white;
font-family: 'Wavehaus';
}
我在Codepen上有一个链接，以便可以看到它：
https://codepen.io/anon/pen/BwrWwg
请注意，字体不会显示。
3
推荐指数
推荐指数
1
解决办法
解决办法
4818
查看次数
查看次数
如何使用Bulma在断点平板电脑下隐藏列？
鉴于以下html:
<div class="columns">
<div class="column">Always here</div>
<div class="column">Hidden on mobile</div>
<div class="column">Always here</div>
</div>
如何让中间栏隐藏在手机上？
注意:我在官方文档上找不到这个"隐藏"功能的帮助.
3
推荐指数
推荐指数
2
解决办法
解决办法
2841
查看次数
查看次数