标签: bulma

我使用 Bulma 进行列管理，它有一个is-multiline可用于允许列换行的类。但是，我没有使用此类，但我的列仍在换行。

预期行为：

两列始终并排位于同一行

实际行为：

在某些视口宽度下，第二列位于第一列下方而不是旁边。

问题

如果您熟悉 Bulma，您介意看一下这个简单的示例，并让我知道我是否做了明显错误的事情吗？非常感谢！

超文本标记语言

<div class="body">
  <div class="columns">
    <div class="column row-name is-narrow">
      Row 1
    </div>
    <div class="column row-cells">
      Some data
    </div>
  </div>
</div>

CSS

.body {
  width: 600px;
  background-color: #000;
  margin: 0 auto 0;
}
.row-name {
  background-color: #ffff0088;
  width: 50px;
}
.row-cells {
  background-color: #ff000088;
}

JSFiddle： https: //jsfiddle.net/8ggyagxp/10/

我从 Blazor 网站中的 Bulma 网站复制了此示例导航栏。在网页上它工作正常，但在移动设备上导航栏汉堡没有响应。我是否错过了这个过程中至关重要的一步？例如，我需要对 .css 执行某些操作吗？

<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">
                    More
                </a>

                <div class="navbar-dropdown">
                    <a class="navbar-item">
                        About
                    </a>
                    <a class="navbar-item">
                        Jobs
                    </a>
                    <a class="navbar-item">
                        Contact
                    </a>
                    <hr class="navbar-divider">
                    <a class="navbar-item">
                        Report an issue
                    </a> …

安装 Bulma 后，我收到错误，可以通过浏览器检查器看到错误

我有角度10。

我采取的步骤是

• npm -i 布尔玛。bulma 目录位于node_modules/bulma

• npm i -D @creativebulma/bulma-collapsible

• 在angular.json中加载 javascript作为

  "styles": [
          "src/styles.css",
          "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
          "./node_modules/bulma/css/bulma.css"
  ],
  

  Run Code Online (Sandbox Code Playgroud)

• 在组件 css 文件中加载 css

  @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
  @import '~bulma/css/bulma.css';
  

  Run Code Online (Sandbox Code Playgroud)

通过控制台的错误消息是

 Could not load content for http://localhost:4200/node_modules/bulma/css/bulma.css

使用以下配置，一切都工作正常npm run dev，但是当我们这样做时npm run build，出现了错误：

./assets/scss/main.scss 中的错误（./node_modules/@nuxt/postcss8/node_modules/css-loader/dist/cjs.js？ref--7-oneOf-1-1！./node_modules/@ nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf- 1-3！./assets/scss/main.scss）模块构建失败（来自./node_modules/@nuxt/postcss8/node_modules/postcss-loader/dist/cjs.js）：ParserError：第1行语法错误，第23栏

nuxt.config.js

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'app-name',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/open-sans-all/css/open-sans.min.css' },
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/scss/main.scss', …

是否有一个简单的 css 代码让 bulma 将它们的水平标签变成垂直标签？（下面的示例）我只想覆盖他们的 css

<div class="tabs">
  <ul>
    <li class="is-active"><a>Pictures</a></li>
    <li><a>Music</a></li>
    <li><a>Videos</a></li>
    <li><a>Documents</a></li>
 </ul>
</div>

我正在尝试使用bulma框架，但我只需要网格部分，可悲的是它全部都在sass中，我不知道如何仅获取css部分。

回购在这里https://github.com/jgthms/bulma/tree/master/sass/grid，我假设网格被命名为columns.sass

如果我通过npm下载bulma作为

npm install bulma

我已经安装了get / sass。如何仅在CSS中获取网格部分？

我已经开始学习布尔玛。我想在x轴上最小化容器（图片中的灰色区域）的大小，以便将元素嵌入其中。找不到文档中的任何相关内容。这是我的源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" it> 
    <title>Title</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">

    <div class="hero-body has-background-danger">
        <nav class="navbar has-background-primary">
            <div class="container has-background-grey-light is-fluid ">
           </div>
        </nav>
    </div>
</section>
</body>
</html>

这是此代码的示例视图：

我最近开始尝试 Bulma 和 Fontawesome，我发现垂直和水平对齐图标很棘手。我的情况如下。

1. 我通过NPM下载布尔玛：npm i bulma --save-dev;
2. 我进口的相关Fontawesome文件按照布尔玛文档：<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>;
3. 创建了一个基本的输入元素字段，左侧有一个图标，右侧有另一个：

<div class="control has-icons-left has-icons-right">
    <input class="input" type="text">
    <span class="icon is-small is-left">
        <i class="fas fa-map-pin"></i>
    </span>
    <span class="icon is-small is-right">
        <i class="fas fa-check"></i>
    </span>
</div>

Run Code Online (Sandbox Code Playgroud)

这导致图标奇怪地与它们各自位置的左上角对齐。我试图通过将一个has-text-centered类附加到 span 元素来使它们居中，但这不起作用。任何解决方法？

Bulma 有非常好的表格布局，但是我正在努力寻找如何水平对齐表格数据单元格 ( <td></td>) 内容。

简单地添加

<td align='center'>in the middle</td>

不起作用。

建议？

我想要两列，一个左侧边栏和主要内容。

我希望侧边栏是固定的（并在需要时滚动）

  <div class="is-widescreen">
    <div class="columns">
      <aside id="main_sidebar" class="column">
        <h1>test</h1>
      </aside>  
      <div class="column is-four-fifths">
        <div id="editorjs" class="content">
          <!-- see the demo for the effect-->
        </div>
        <button id='save'>save article</button>    
      </div>
    </div>
  </div> 

在editorjs将包含的内容很多，所以我想要的侧边栏内容不被主部上滚动的影响。

演示