bulma中图像的下拉列表问题

Bulma是一个基于Flexbox的现代CSS框架，它提供了一套简洁、易用的样式和组件，用于快速构建响应式的网页界面。

在Bulma中，图像的下拉列表问题可以通过使用下拉菜单组件来解决。下拉菜单组件可以用于创建一个包含多个选项的下拉列表，用户可以从中选择一个选项。

下拉菜单组件的基本结构如下：

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
      <span>Select an option</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu" role="menu">
    <div class="dropdown-content">
      <a href="#" class="dropdown-item">
        Option 1
      </a>
      <a href="#" class="dropdown-item">
        Option 2
      </a>
      <a href="#" class="dropdown-item">
        Option 3
      </a>
    </div>
  </div>
</div>

在上面的代码中，.dropdown类用于创建一个下拉菜单容器，.dropdown-trigger类用于包裹触发下拉菜单的按钮，.dropdown-menu类用于创建下拉菜单的内容，.dropdown-content类用于包裹下拉菜单的选项。

你可以根据需要自定义按钮和选项的样式，例如添加.is-primary类来设置按钮为主要样式，或者添加.is-hoverable类来使下拉菜单在鼠标悬停时显示。

关于Bulma的下拉菜单组件的更多信息和示例，你可以参考腾讯云的Bulma文档：Bulma - Dropdown。

请注意，以上答案仅针对Bulma框架中图像的下拉列表问题，不涉及其他云计算相关的知识点。

bulma中图像的下拉列表问题

css、bulma

我正在尝试用用户图像做一个下拉菜单。然而，当我使用(第一种情况)时，图像被放错了位置，或者它只使用了正确的位置，而不是我想要的四舍五入(第二种情况)。正如bulma文档所说的那样，我开始使用图像组件。我正在通过一些类，我删除了外部。如果没有我就不能让图像变圆第二种情况：<img src="image">

浏览 4提问于2019-10-26得票数 2

1回答

Jinja2 /烧瓶-在一页中多次重复使用基本模板

flask、jinja2

我有共同的基本元素，我的网站，我要重复使用多次在一页。from flask import render_template def index(): returnLandingPage.html', FileN

浏览 1提问于2022-03-10得票数 0

回答已采纳

2回答

我可以在Bulma选项卡中使用Bulma下拉菜单吗？

vue.js、bulma

我用的是Nuxt.js和Bulma。我正在使用Bulma标签()进行导航。我怎么才能修复它？

浏览 2提问于2018-08-17得票数 0

1回答

Flexbox弹性包装不允许下拉- Bulma.css中的多个项目

html、css、flexbox、bulma

我正在创建一个使用Bulma文件的网页，而且我在导航栏上有一个问题。所以我试着在导航栏中定制下拉列表，包括并排链接，而不是上下链接。这是Bulma中默认的下拉列表：但是，我想创造出这样的东西.但有多行这就是我的问题所在。我不能让他们走到新的线后，最大宽度是达到，他们只是继续往右边，如果我有很多项目。现在，下面

浏览 4提问于2021-07-07得票数 1

回答已采纳

1回答

如何处理单击Bulma的下拉组件？

javascript、html、bulma

我在应用程序中使用bulma，我有一个下拉列表，如下所示：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css"> <div class="

浏览 1提问于2019-04-10得票数 1

回答已采纳

2回答

Bulma select dropdown不会在Safari浏览器上显示下拉菜单；甚至在反复点击select dropdown时会导致Safari冻结。我可以在macOS版本13.0.1的Safari版本10.14.6上重现这个问题。这个问题出现在任何使用Bulma select的网站上，甚至在Bulma官方网站上也是如此：https://bulma.io/documentation/form&

浏览 23提问于2019-10-03得票数 0

1回答

如何只从Nuxt的buefy导入Navbar、下拉列表和Modal？

vue.js、vuejs2、nuxt.js、buefy

--我只是尝试从Buefy导入Navbar、Modal和下拉列表，并在执行相同的时遇到错误--我也只想要相关的scss文件----到目前为止，我已经尝试过多种方法，但是没有任何一种方法可以执行。Bulma 在资产内部创建app.scss "~bulma“文件夹在app.scssInclude‘/资产/样式/app中，nuxt.config.jsnpm run build &npm run startbuefy/d

浏览 4提问于2020-04-18得票数 3

回答已采纳

3回答

在模态卡机身后面

css、web-frontend、bulma

我意识到嵌入在模态卡体中的Bulma下拉列表被模态体所覆盖，因此这会导致UX问题，如果下拉列表比它自己的卡体高，用户必须向下滚动或移动鼠标光标并向下移动滚动条，对此应该使用什么CSS修复？也就是说，下拉显示在顶层(我增加了z-index的ddl，但没有运气，请注意:I DO需要的是模态卡主体部分的overflow-y: scroll或auto。 <!@0.9.3&#

浏览 1提问于2021-08-26得票数 3

回答已采纳

1回答

删除下拉图标问题

css、bulma

对于这个问题，我经历了各种不同的解决方案，但这些方法似乎对我不起作用。我确信这是因为我使用的是一个CSS框架，Bulma，它倾向于为错误的方向接管一些事情。我试图从下拉菜单中删除下拉图标，并将其替换为图像。我有图像显示，但我似乎无法使默认箭头隐藏/删除。它也已经有了看涨的关联。

浏览 0提问于2019-02-08得票数 1

回答已采纳

3回答

Bulma导航栏下拉菜单在Internet Explorer 11中不起作用

internet-explorer、bulma

当我使用Internet Explorer11导航到Bulma文档(https://bulma.io/documentation/components/navbar/)的导航栏部分时，即使将导航栏链接下拉菜单设置为这也是我使用自己的代码的经验。有没有什么办法可以解决这个问题呢？

浏览 42提问于2019-06-05得票数 2

3回答

无响应Bulma导航

bulma

我正在使用Bulma，我需要使导航栏，无响应。我不想要汉堡菜单或者倒塌的导航。我不知道如何做到这一点，但在文档中没有提到。Bootstrap有一个你可以添加的类来支持这一点，是否可以使用Bulma？

浏览 0提问于2018-06-05得票数 2

1回答

Bulma限制？

css、bootstrap-4、frameworks、styles、bulma

我正在努力决定一个基本的投资组合网站的CSS框架。我想有一些JS组件，我可以添加一个单独的库。似乎人们喜欢Bulma，但我想知道它是一个"JS free“框架的限制是什么。到目前为止，我只使用了Bootstrap，我想尝试一些新的东西，最好是更干净、更容易使用的东西。欢迎任何见解和建议。谢谢!

浏览 19提问于2020-03-31得票数 1

1回答

如何在Fulma/Fable中插入自定义HTML标记？

html、f#、bulma、fable-f#

我正在使用Fable (2) + Fulma (1.1) + Elmish (2)作为一个web，我想添加一个Select下拉列表，如Bulma 中所记录的那样。它对项目使用了<option> HTML标记，但是我在Fulma中找不到它。在这种情况下，如何将任意标记写入视图？

浏览 0提问于2019-03-30得票数 4

回答已采纳

2回答

F# Feliz.Bulma下拉框/组合框

f#、safe-stack

我的问题很简单-如何在SAFE项目(使用Feliz.Bulma)中创建组合框(dropdown)并以编程方式填充它。在docs中没有这样的组件。This是我找到的唯一一个示例(Fulma)，并且不能将其合并到我的项目中。

浏览 32提问于2021-08-16得票数 0

1回答

Bulma水位计与集装箱

bulma

将级别类放在nav元素上，如下所示：<nav class="level"> <figure class="image"> <img src="images

浏览 5提问于2022-05-16得票数 2

回答已采纳

1回答

将样式绑定到字段仅适用于移动屏幕

css、vue.js、bulma

我正在尝试用Bulma和Vue.js做一个导航栏，Bulma有这样一个东西，当导航栏折叠到汉堡菜单时，里面的下拉列表已经处于display: block;模式。所以我找到了一个变通方法，但它也将相同的样式应用于所有屏幕尺寸。然后，我尝试仅在模板中绑定如下样式 <div class="navbar-dropdown" :style="@media screen and (max-width: 900px){display:如果从第26行删除@media

浏览 15提问于2019-02-02得票数 0

1回答