标签: bulma
移动设备上的 Bulma 模态间距
因此，在查看 Bulma 文档（https://bulma.io/documentation/components/modal/）时，我正在使用桌面和移动设备的模式，但遇到了一些格式问题。
在 Bulma 上，移动视图不会在两侧添加任何间距，如下所示：
有谁知道为布尔玛添加模态间距的原生方法？我使用px-4的效果很好，但它也在桌面上添加了填充，但我有以下模式结构：
<div id="mobile-profile-modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card px-4">
<header class="modal-card-head">
<p class="modal-card-title"><?= $user->get_first_name(); ?></p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="container">
<div class="columns is-centered">
<div class="column">
<button class="button is-fullwidth">Profile</button>
<button class="button is-fullwidth">Settings</button>
</div>
</div>
</div>
</section>
<footer class="modal-card-foot">
<button class="button is-fullwidth is-primary">
<span class="icon">
<i class="fas fa-sign-out-alt"></i>
</span>
<span>Logout</span>
</button>
</footer>
</div>
</div>
推荐指数
解决办法
查看次数
如何调整布尔玛表列的宽度
我正在尝试使用 Bulma 表创建日历，除了一个问题之外，一切正常。我的日历如下所示
您可以看到列宽不均匀（例如，周五的列宽小于周一的列宽），并且不应该是这样，日历的每一天都应该具有相同的宽度。下面是这个的代码片段
<table class="table is-bordered">
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
</tbody>
</table>
我不确定如何使用 CSS 或任何其他更好的方法来解决这个问题。如果您能为我指明正确的方向，我将不胜感激。
推荐指数
解决办法
查看次数
有没有一种方法可以将各种 SCSS 和 SASS 文件一起编译成一个 SCSS 捆绑文件？
我目前正在构建一个 npm 组件库，并使用汇总捆绑过程来编译该库以进行分发。该项目的CSS是使用SCSS编写的，但它也依赖于Bulma ，这是一个用SASS编写的CSS框架。
我希望能够将 bulma 源代码与我的自定义 scss 全部捆绑到一个 scss 文件中，然后我可以在其他项目中使用该文件。这样我仍然可以从这些项目中 scss 提供的功能中受益，例如变量和 mixin。
我希望在构建过程中实现自动化，这样我在开发新组件时就不必担心它。我查看了许多用于捆绑 scss 文件的 npm 包，但没有一个包同时支持SASS和SCSS。我也尝试过将我的项目完全转换为 sass，但总体上似乎没有对 sass 捆绑提供任何良好的支持。
例如，我可能有一个 main.scss 文件，如下所示：
@import "~bulma/bulma.sass";
@import "./utils/variables.scss";
它将 sass 和 scss 文件一起导入。这是 sass 编译器支持的东西，我可以将其编译为捆绑的 css 文件，没有任何问题。但似乎不支持捆绑到一个 scss 文件中。
我一直尝试使用的两个主要 NPM 包是：
scss-bundle很棒，但它似乎没有 SASS 支持，所以这对 Bulma 来说是不行的。
至于bundle-scss，我将项目转换为使用SASS并相应地配置了包，使用的配置如下：
{
"dest": "dist/bundle.sass",
"mask": ["src/styles/**/*.sass", "node_modules/bulma/**/*.sass"]
}
据我所知，这应该遍历样式文件夹和 Bulma 依赖项文件夹的所有子目录中的所有文件，并将它们一起编译成一个bundle.sass文件。尽管我更喜欢来自 …
推荐指数
解决办法
查看次数
包裹在表单标签中时,Bulma表单控件宽度被禁止
在遵循Bulma文档时,您可以input.input使用a 来换行p.control以对其进行样式设置并使其扩展容器的宽度.但是,当容器是一个表单(可能是它)时,控件会缩小到默认大小.我究竟做错了什么？
代码示例如下:
<div class="panel">
<div class="panel-heading">
Login
</div>
<div class="panel-block">
<form>
<p class="control has-icon">
<input class="input is-expanded" type="email" placeholder="E-mail Address" name="email" autofocus>
<span class="icon is-small">
<i class="fa fa-envelope"></i>
</span>
</p>
<p class="control has-icon">
<input class="input is-expanded" type="password" placeholder="Password" name="password">
<span class="icon is-small">
<i class="fa fa-lock"></i>
</span>
</p>
<p class="control">
<button class="button is-success" type="submit">
Login
</button>
</p>
</form>
</div>
</div>
推荐指数
解决办法
查看次数
布尔玛网格布局列扩展到视口
使用Bulma CSS框架.
我正在尝试布局一些元素,我不知道为什么在桌面视图上,一旦它们经过视图端口的项目不会进入下一行.
这是一个示例代码和JS Bin的相应链接:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.min.css">
<title>JS Bin</title>
</head>
<body>
<div class="columns">
<div class="column is-one-quarter">
Col 1
</div>
<div class="column is-one-quarter">
Col 2
</div>
<div class="column is-one-quarter">
Col 3
</div>
<div class="column is-one-quarter">
Col 4
</div>
<div class="column is-one-quarter">
Col 5
</div>
</div>
<div class="columns">
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column is-4
</div>
<div class="column is-4">
column …推荐指数
解决办法
查看次数
两行布尔玛导航栏
在bulma.io中重新创建此内容的最佳方法是什么？包括责任感，汉堡包等
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="row navbar-first-row">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar-main-collapse">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<span class="sr-only">Toggle navigation</span>
</button>
<div class="navbar-right navbar-text hidden-xs">
Logo
</div>
<h1 class="h4 navbar-text">Really long application title</h1>
</div>
<div class="row navbar-second-row">
<div class="navbar-right navbar-text hidden-xs">Logged User</div>
<div class="collapse navbar-collapse" id="navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
</div>
</div>
</nav>--- tl; …
推荐指数
解决办法
查看次数
如何切换bulma中的选项卡
我正在尝试实现导航标签面板来切换标签.我浏览了Bulma文档但找不到任何文档.这是示例代码
<div class="tabs is-toggle is-fullwidth">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
<p>
Here goes pictures
</p>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
<p>
Here goes music
</p>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
<p>
Here goes music
</p>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
<p>
Here goes music
</p>
</li>
</ul>
</div>
这里是我正在尝试的JSfiddle.我希望"Here goes picture"仅在图片标签处于活动状态时显示,反之亦然
推荐指数
解决办法
查看次数
bulma列中的中心内容
我有多列。每列在CSS的中心都有一个字体超棒的图标，其中包含一个圆圈。现在，我想使圆本身在列的中间对齐。但是，当文本本身居中时，它始终保持在左侧。
的HTML
<div class="features">
<div class="container">
<div class="columns is-mobile ">
<div class="column">
<div class="community">
<font-awesome-icon col size="2x" :icon="['fas', 'tasks']" />
</div>
Features
</div>
</div>
</div>
</div>
的CSS
.features {
background: #2a3a4c;
height: 200px;
}
.community {
width: 5rem;
height: 5rem;
background: linear-gradient(135deg, #b15757 0%, #b96868 100%);
border-radius: 100%;
text-align: center;
vertical-align: middle;
display: table-cell;
}
推荐指数
解决办法
查看次数
可能在SCSS中导入SASS文件？
styles.scss
@import 'packages/bulma.sass';
布尔萨斯
@charset "utf-8"
/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
@import "sass/utilities/_all"
@import "sass/base/_all"
@import "sass/elements/_all"
@import "sass/components/_all"
@import "sass/grid/_all"
@import "sass/layout/_all"
终奌站
'错误：client / packages / bulma.sass.scss不存在！
是否有可能导入SASS到一个SCSS文件？将bulma安装到scss env中的最佳方法是什么。
我也尝试过@import 'packages/bulma'，并得到client/packages/bulma.scss doesn\'t exist!。
推荐指数
解决办法
查看次数
Bulma - 导航栏徽标图像不适应导航栏高度。如何更改徽标图像的大小？
我刚刚开始使用 Bulma ( bulma.io ) 并希望将此图像调整为导航栏高度，我认为默认情况下它是 3.25rem（16px 基本字体大小），但事实并非如此。
我已经尝试将图像大小调整为 600px x 140px 没有运气，我在谷歌上搜索了很多但仍然无法修复它。但是，如果我使用 600px x 140px 的示例 bulma 图像，它可以工作吗？这是使用 bulma 图像的代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="https://bulma.io/images/bulma-logo.png">
</a>
</div>
</nav>我的代码
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="#">
<img src="https://preview.ibb.co/bVUFKU/logo_transparent.png" alt="logo_transparent">
</a>
</div>
</nav>推荐指数
解决办法
查看次数