标签: bulma
bulma：水平表单控件未正确展开
我有一个文本输入和 2 个选择，我想将它们水平放置。基于bulma css框架，我应该做的是：
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<p class="control is-expanded has-icons-left">
<input class="input" type="text" placeholder="Search" name="id" id="id">
<span class="icon is-small is-left"><i class="fa fa-search"></i></span>
</p>
</div>
<div class="field">
<p class="control">
<span class="select">
<select name="status" id="status">
<option value="">Status:</option>
<option value="active">active</option>
<option value="pause">pause</option>
</select>
</span>
</p>
</div>
<div class="field">
<p class="control">
<span class="select">
<select name="limit" id="limit">
<option value="">Limits:</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</span>
</p>
</div>
</div>
通常最后 2 个选择应该采用它们的实际宽度，第一个输入应该扩展直到它占用可用空间，但这就是我得到的：
1
推荐指数
推荐指数
1
解决办法
解决办法
5009
查看次数
查看次数
Bulma css框架列未在Chrome移动浏览器上堆叠
我想弄清楚为什么我的小静态网页在移动设备上观看时没有正常显示(在Chrome安卓应用中注意到).根据文档,列应自动堆叠在移动设备上.但是,当我查看它时,我看到页面的正常视图,宽度适合屏幕,但列保持在一行.如下面的截图所示.
我通过在桌面浏览器上调整页面大小来测试是否是我的代码,页面按预期响应,将卡堆叠在一列中.这是我手机上模仿的桌面视图.
知道发生了什么事吗？我究竟做错了什么？这是代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css"/>
</head>
<body style="background-color:#00aced;">
<div class="container">
<div class="notification" style="background-color:#fff">
<strong>Remember:</strong> In order to continually receive updates, please install the GoodSamarit4n repository from
<a href="">here</a>. This is the <em>only</em> official source. The reason I am providing links to the add-on zips is for complete transparency and for those who would like to study and learn from the code.
<br>
</div>
</div>
<div style="padding: 20px;" class="container">
<div class="columns">
<div class="column">
<div class="card">
<div class="card-image"> …1
推荐指数
推荐指数
1
解决办法
解决办法
939
查看次数
查看次数
如何在较小的屏幕上水平对齐布尔玛的关卡项目？
level根据Bulma 文档，我网站的页脚包含一个左右部分的布局。在大屏幕上这很好。
然而，在较小的屏幕上，右侧部分的所有项目都会垂直堆叠。而我希望它们水平对齐并居中，如下图所示。
请看这个例子：https :
//codepen.io/anon/pen/aVdPPy
1
推荐指数
推荐指数
1
解决办法
解决办法
5053
查看次数
查看次数
中间的布尔玛进度文本
为什么当我使用 Bulma CSS 框架(https://bulma.io/documentation/elements/progress/) 的进度时
我把文本放在标签之间，我看不到任何价值。
<progress class="progress is-danger" value="90" max="100">90%</progress>
如何在布尔玛的进度中间添加文字？
1
推荐指数
推荐指数
1
解决办法
解决办法
2798
查看次数
查看次数
Bulma Steps Extension 不会“踩踏”
我写了以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mockup TOPdesk</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.js" integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bulma-steps@2.2.1/dist/js/bulma-steps.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-steps@2.2.1/dist/css/bulma-steps.min.css">
</head>
<body>
<nav class="navbar is-white">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item brand-text" href="/">
TOPdesk Admin
</a>
<div class="navbar-burger burger" data-target="navMenu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="admin.html">
Home
</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="columns">
<div class="column is-2"> …1
推荐指数
推荐指数
1
解决办法
解决办法
1433
查看次数
查看次数
如何使用 Bulma 完成像 Google Keep 这样的砖石布局？
我试图得到类似的东西：
我正在使用 Bulma，目前我正在使用带有is_multiline选项的列。但我唯一能得到的是：
我想消除卡片之间的差距，我想使用更多的 flexbox 选项。它也必须是响应式的。
.card-columns {
column-count: 1;
column-gap: 1.5rem;
padding: 1.5rem;
}
.card-columns .card {
display: inline-block;
width: 100%;
margin-bottom: 1.5rem;
}
.columns-6 {
column-count: 6;
}
.columns-5 {
column-count: 5;
}
.columns-4 {
column-count: 4;
}
.columns-3 {
column-count: 3;
}
.columns-2 {
column-count: 2;
}
.columns-1 {
column-count: 1;
}
@media (max-width: 768px) {
.columns-6-mobile {
column-count: 6;
}
.columns-5-mobile {
column-count: 5;
}
.columns-4-mobile {
column-count: 4;
}
.columns-3-mobile { …1
推荐指数
推荐指数
1
解决办法
解决办法
2574
查看次数
查看次数
gatsbyjs中的bulma菜单切换不起作用
GatsbyJS初学者在这里，尝试获取布尔玛响应式菜单切换，以将“ is-active”类应用于菜单（具有Gatsby Starter Netlify CMS的Gatsby v2）。所有代码在这里：https : //github.com/pddew/gatsby-starter-netlify-cms
当前，切换按钮和脚本标签出现，但是按钮没有响应。
gatsby入门企业中有一个有效的版本-当我检查并与之比较时，我无法发现错误，只是应该在切换按钮上没有事件监听器。当我检查站点时，将调用toggle.js脚本，并将其放在关闭body标记之前，然后进行查看。
我试过没有运气的构建和部署，清除缓存并将脚本替换为bulma的建议代码。
这是相关的代码。任何帮助，我们将不胜感激；我有点卡住了！
在Layout.js中：
import React from 'react' import Helmet from 'react-helmet'
import Navbar from '../components/Navbar' import Footer from '../components/Footer' import './all.sass'
const TemplateWrapper = ({ children }) => ( <div>
<Helmet title="Immediate Start Jobs" />
<Navbar />
<div>{children}</div>
<Footer /> </div> )
export default TemplateWrapper
在导航栏中：
<button className="button navbar-burger" data-target="navMenu">
<span />
<span />
<span />
</button>
</div>
<div className="navbar-menu" id="navMenu">
<div className="navbar-start">
<Link className="navbar-item" to="/about">
About
</Link> …1
推荐指数
推荐指数
1
解决办法
解决办法
925
查看次数
查看次数
在Nuxt组件中覆盖布尔玛变量
我尝试$navbar-height通过Nuxt组件中的安装函数来更改的值。到目前为止，除覆盖布尔玛变量外，其他所有东西都在工作
我在Nuxt配置中添加了布尔玛：
modules: [
// Doc: https://github.com/nuxt-community/axios-module#usage
'@nuxtjs/axios',
// Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
'@nuxtjs/bulma',
'@nuxtjs/font-awesome'
]
并更改了main.scss文件中的一些变量：
@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/mixins';
@import '~bulma/sass/utilities/functions';
$primary: #3dccc8;
$danger: #dc5222;
$navbar-height: 5rem;
$navbar-item-img-max-height: 3rem;
@import '~bulma/bulma';
该main.scss也得到了加入Nuxt配置
css: [
{ src: '~assets/css/main.scss', lang: 'scss' }
],
I now try to manipulate the Variable in a component, but nothing happens.
Here is the function:
mounted() {
this.$nextTick(function(){
window.addEventListener("scroll", function(){
var navbar = document.getElementById("nav")
var nav_classes = navbar.classList
if(document.documentElement.scrollTop >= 10) { …1
推荐指数
推荐指数
1
解决办法
解决办法
1467
查看次数
查看次数
Bulma 导航栏汉堡菜单不展开
我复制了Bulma的基本入门模板和基本导航栏。然而，当我点击汉堡菜单时，没有任何反应:(。我错过了什么吗？你可以在我的 jsfiddle 中尝试：
<!DOCTYPE html>
<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.4/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> …1
推荐指数
推荐指数
1
解决办法
解决办法
3886
查看次数
查看次数
Bulma（css 框架）自动添加 iframe 高度，嵌入的 YouTube 视频获得更少的高度
布尔玛添加了以下行：
img, embed, iframe, object, video {
height: auto;
max-width: 100%;
}
而且我无法弄清楚如何将嵌入的 YouTube 视频设置为它们的预期高度，因为height: auto它们的高度会变小，height而且我知道没有任何属性可以解决这个问题。因为对于每种可能性，视频的高度都会变低（相同大小）。所以我什至不能覆盖它。
谁能想到解决办法？
1
推荐指数
推荐指数
1
解决办法
解决办法
3016
查看次数
查看次数
标签 统计
bulma ×10
css ×7
html ×4
javascript ×2
flexbox ×1
frameworks ×1
gatsby ×1
height ×1
iframe ×1
netlify ×1
nuxt ×1
progress-bar ×1
responsive ×1
sass ×1
toggle ×1
vue.js ×1