html - 如何使用 Bulma CSS 框架防止列溢出模态-6ren

html - 如何使用 Bulma CSS 框架防止列溢出模态

转载作者：行者123 更新时间：2023-12-04 10:00:38

this minimal example on codepen充分说明了这个问题

然而，重申一下:Bulma CSS 框架提供了一个列容器和一个模态元素。如果一个放在另一个里面，如以下完整代码所示:

<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.1/css/bulma.min.css">
  <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
</head>

<body>
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Modal title</p>
        <button class="delete" aria-label="close"></button>
      </header>
      <section class="modal-card-body">
        <div id="my-columns" class='columns is-mobile'>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
          <div class='column'>
            <button class='button is-primary'>Some Button</button>
          </div>
        </div>
      </section>
      <footer class="modal-card-foot">
        <button class="button is-success">Save changes</button>
        <button class="button">Cancel</button>
      </footer>
    </div>
  </div>
</body>

</html>

然后 .columns 元素采用父元素的宽度，但其中的 .column s 将模态溢出到右侧。

有谁知道这是为什么以及如何阻止它发生？这肯定是一个 flexbox 问题，但 CSS 并不是我真正的领域。欢迎任何关于需要哪些信息才能使这个问题更普遍适用的评论(就 Bulma 框架内使用的 css 而言)。

最佳答案

原因是块状元素，例如display: flex也就是说，它不会变得比它的父级大，因此会导致此溢出。

如果您制作 #my-columns内联灵活它会工作，使用 is-inline-flex .

堆栈片段

#my-columns {
  background-color: red;  
}

<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.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
  </head>
  <body>
  <div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <div class="modal-card-body">
      <div id="my-columns" class='columns is-mobile is-inline-flex'>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
      </div>
    </div>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>
  </body>
</html>

另一种选择是使用 is-multiline 使其断线。

堆栈片段

#my-columns {
  background-color: red;  
}

<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.1/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
  </head>
  <body>
  <div class="modal is-active">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <div class="modal-card-body">
      <div id="my-columns" class='columns is-mobile is-multiline'>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
        <div class='column'>
          <button class='button is-primary'>Some Button</button>
        </div>
      </div>
    </div>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>
  </body>
</html>

关于html - 如何使用 Bulma CSS 框架防止列溢出模态，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51455174/

文章推荐： bitcoin - 取消比特币交易

文章推荐： javascript - 如何减小我的 Node js lambda 函数的大小？

文章推荐： Pandas 分组数据框，类别列具有最大总和值

文章推荐： logstash - 用管道分隔数据的Grok模式

angularjs - 什么是 Angular 态？
我来自 Asp.Net 世界，试图理解 Angular State 的含义。什么是 Angular 状态？它类似于Asp.Net中的ascx组件吗？是子页面吗？它类似于工作流程状态吗？我听到很多人
javascript - 3 态 CSS 拨动开关
我一直在寻找 3 态拨动开关，但运气不佳。基本上我需要一个具有以下状态的开关: |开 |不适用 |关 | slider 默认从中间开始，一旦用户向左或向右滑动，就无法回到N/A(未回答)状态。有人

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何使用 Bulma CSS 框架防止列溢出模态