标签: bulma

我将 vuejs 与 bulma 和 buefy 一起使用。我正在使用 buefy 模态并尝试使用其“width”属性设置模态宽度。我尝试在 html 中指定它并使用 javascript 打开模式。

this.$modal.open({
  parent: this,
  component: dummyComponent,
  width: 720
}) 

有人可以帮我吗？

AFAIK 人们创建自己的类似表格的组件，而使用旧的 HTML 表格有点“过时”。现在我需要为我的 vuejs 应用程序提供一个表。我正在使用 bulma ，文档说明了这一点：

桌子

不可避免的 HTML 表格，带有特殊情况的单元格

该标题下方的“支持”徽章表明对其没有太多支持（仅变量），并且文本本身听起来像“好吧......因为这么多不最新的人想要它，在这里，拿去”。

我应该选择“无序列表”方式还是其他方式？就像创建一个代表行的组件和一个将表格固定在一起的组件一样？我并不是专门要求 vue，而是要求一种相当“现代的方法”以及如何正确地做类似的事情。

我目前正在为番茄计时器构建一个应用程序，我使用 Bulma 作为 CSS 框架，到目前为止我很喜欢它，我仍在学习 Flexbox 的工作原理，我想知道什么是最好的解决这种情况的方法，以及是否可以仅使用 Bulma 类来完成，或者我是否必须创建自己的类。

我正在尝试为添加的每个任务创建“卡片”，但我希望它们的宽度约为全屏宽度的一半或更少。我不明白如何使用 Bulma 实现这一点，因为所有内容都只占用完整宽度，而且我不能将所有内容居中，因为它没有硬编码宽度。这是我包含任务卡的部分的代码。

 <div class="section">
     <div class="task-container is-center">
         <div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
             <input type="checkbox" class="checkbox">
             <span class="has-text-left">
                     {{task.desc}}
             </span>
             <span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
             <span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
         </div>
     </div>
 </div>

任何帮助、提示、建议等，我们将不胜感激！

我创建了一个名为的新反应组件，用于显示一些用户信息。我将每个用户数据都存储在对象数组中。我想创建一个布局，在行容器（Bulma css 框架的列）中显示每 3 个用户，并为每个用户提供一个列元素。

我检查了类似这样的其他问题，在循环中每 3 列后创建新行 ，并且所有问题都在 HTML 中使用非结束标签来创建布局，但在 React.js 中，所有标签都必须有一个结束标签。

users: [
{id:1, name: Tomas}
{id:2, name: Tomas}
{id:3, name: Tomas}
{id:4, name: Tomas}
{id:5, name: Tomas}
{id:6, name: Tomas}
]


return (
 ////

 const users = users.map(user,index) => {
  if (index % 3 === 0) {
  /// some code to create the layout
   }

  return <div className="column><User name={client.name}/></div>

  }
///
)

我想渲染这样的东西

<div className="columns">
  <div className="column">
    <User id={users.id} name={users.name}/> // id 1
  <div>
  <div className="column"> …

这是一个包含问题的沙盒

• 我在导航栏中有一个可悬停的下拉菜单
• 当我移至其他页面时，下拉菜单仍然打开
• 我已经在普通布尔玛中尝试过此操作，问题仍然存在
• 我在 Nuxt.js 上使用 SSR
• 我正在使用 nuxt-link / Vue router-link 的等效项来导航到不同的页面。

这是我的default.vue 文件

<template>
  <div class="ch-container">
    <header class="ch-header">
      <nav
        class="navbar is-fixed-top"
        role="navigation"
        aria-label="main navigation"
      >
        <div class="navbar-brand">
          <nuxt-link class="navbar-item" to="/">
            <img
              alt="CH Logo"
              src="https://i.imgur.com/v35Kfc9.png"
              width="28"
              height="28"
            />
          </nuxt-link>

          <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">
            <nuxt-link class="navbar-item" to="/news">
              News
            </nuxt-link>

            <nuxt-link class="navbar-item" to="/resources">
              Resources
            </nuxt-link>

            <nuxt-link class="navbar-item" to="/tickers">
              Tickers
            </nuxt-link>

            <div class="navbar-item has-dropdown …

我正在使用 Gatsby 和 Bulma 构建一个网站。在我的Nav.js文件中，我为网站顶部的按钮创建了通用格式，我有一些使用 Bulma 的按钮，我想在其中添加图标。我关闭了使用 Font Awesome Icons 添加 Bulma 按钮的文档：https://bulma.io/documentation/elements/button/。我的代码完全相同，除了我将按钮包装在标签中<a>以链接到网站中的其他页面之外。我<script>在文档中列出了包含的文件，可以使用 Font Awesome 图标，我的代码如下所示：

const Nav = () => {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
    <nav>

    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

        <p class="buttons is-outlined is-centered">
          <a href="/"><button class="button is-outlined"> <span class="icon">
          <i class="fas fa-home"></i>
          </span>
          <span>Home</span>
          </button></a>


          <a href="/projects"><button class="button is-outlined">Projects</button></a>

          <a href="/experience"><button class="button is-outlined">Experience</button></a>
        </p>

      </nav>
    </div>
  )
}

我不确定我是否已将其script放置在文件的正确部分，并且我只是尝试为我的主页按钮放置一个图标，如下所示：

我猜图标应该在“主页”左侧的间隙处。对于为什么图标没有显示或显示为空白的任何帮助，我将不胜感激。谢谢你！

我正在使用 Bulma 作为我的 CSS 框架，使用 Vue 和 Laravel 制作一个应用程序。我想要一个页脚保留在页面底部，即使内容没有将其“推”到那里。目前我的自定义 CSS 中有这个：

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#app{
  flex:1;
}

#app是我的默认 Blade 模板中的 div，我的应用程序被注入到其中：

<body>
    <div id="app">
        <index></index>
    </div>
</body>

这是我的主要 Vue 组件，其中注入了路由组件

<template>
    <div>
        <Navigation/>
        <router-view :key="$route.fullPath"></router-view>
        <footer class="footer">Test</footer>
    </div>
</template>

当有足够的内容将页脚推到或超出底部时，这种方法效果很好。但如果没有，屏幕底部就会出现很大的间隙，并且页脚会被直接推到内容的底部。是什么赋予了？

我正在开发一个使用Leaflet.js创建地图的Web应用程序,使用Vue.js来管理应用程序,使用Bulma for CSS.

Bulma有一个"模态"元素,当它的类设置为时,它应该出现在其他所有元素的前面is-active.我有这个工作,除了地图不会像页面的其余部分一样淡入背景.

我对模态知之甚少.有没有人知道为什么地图会在其他一切消失的情况下仍然可见？谢谢!!

我正在尝试在 vue.js 项目中使用 Bulma 和 flexbox 将图标和文本居中，我尝试遵循此问题的答案（How to Vertical center elements in Bulma?）。我的图标垂直居中，但文本元素似乎偏离中心，其下方有几个像素的空白。它们都在同一基线上，但这意味着它们与我的图标不符（见下图）。

我不确定我哪里出错了，我在下面包含了我的代码，如果有任何帮助，我将不胜感激

 <template>
   <div class="singleProjectContainer" :key="project.id">
     <ul class="columns is-flex projectPreview" style="border-bottom: 0.5px solid #c1c1c1;">
       <div class="column is-1 is-flex projectIcon">
         <li>
          <div v-if="project.projectType === 'Identity'"class="projectIcon" >
           <img src="../static/SVG/Identity-Circle.svg" alt="circle icon for branding & identity" />
         </div>
     </li>
   </div>
   <div class="projectTitle column is-4">
     <li> <h3>{{ project.Name }}</h3> </li>
     </div>
     <div class="projectSummary column is-7">
       <li> <p>{{ project.Summary }}</p> </li>
     </div>
   </ul>
 </div>
</template>

<script>
export default {
  name: 'ProjectItem', …

所以我很难对齐布尔玛专栏底部的按钮。

我希望按钮“购买”位于右栏的底部（与按钮“你好”并排）。我处于这种情况是因为我的其他专栏内容更长。

到目前为止，我在按钮上尝试了这些 CSS 样式（但没有一个对我有帮助）：

vertical-align: bottom;

margin-bottom: auto;

position: absolute;
bottom: 0;

这是我的 HTML：

<section class="section">
    <div class="columns is-centered">
        <div class="column is-one-fifth">
            <h4 class="title is-4">I'm a big column</h4>
            I'm taller than the column next to me so my column will be bigger, lorem ipsum lorem ipsum lorem ipsum lorem ipsum
            <h6 class="sub">"lorem ipsum"</h6>
            <button class="button is-fullwidth">Hello</button>
        </div>

        <div class="column is-one-fifth">
            <h4 class="title is-4">I'm a small column</h4>
            I'm a small column, and my button missplaced
            <h6 class="sub">"lorem ipsum"</h6>
            <button class="button …

如何在Bulma CSS框架中制作类似Ajax的标签切换器？如何轻松实现？或者我应该用什么框架来解决这个任务？

一些文本绕过github错误 一些文本绕过github错误 一些文本绕过github错误 一些文本绕过github错误

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<div class="tabs is-centered">
    <ul>
      <li class="is-active">
        <a>
        <span class="icon is-small"><i class="fa fa-html5"></i></span>
        <span>All</span>
      </a>
      </li>
      <li>
        <a>
        <span class="icon is-small"><i class="fa fa-tablet"></i></span>
        <span>Adaptive design</span>
      </a>
      </li>
      <li>
        <a>
        <span class="icon is-small"><i class="fa fa-file-code-o"></i></span>
        <span>jQuery</span>
      </a>
      </li>
      <li>
        <a>
        <span class="icon is-small"><i class="fa fa-cog"></i></span>
        <span>AJAX</span>
      </a>
      </li>
      <li>
        <a>
        <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
        <span>AngularJS</span>
      </a>
      </li>
    </ul>
    <!--/tabs is-centered-->
  </div>