如何使用 Bulma CSS 框架防止列溢出模式答案

【问题标题】：How to prevent columns overflowing modal with Bulma CSS Framework如何使用 Bulma CSS 框架防止列溢出模式
【发布时间】：2018-07-21 10:30:25
【问题描述】：

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 而言）。

【问题讨论】：

标签： html css flexbox bulma

【解决方案1】：

原因是 block like 元素，例如display: flex 是，它不会比它的父节点大，因此会导致这个溢出。

如果您将#my-columns 设置为inline-flex，它会起作用，使用is-inline-flex。

堆栈sn-p

#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 使其换行

堆栈sn-p

#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>

【讨论】：

是的 - 确实，我也是个白痴，因为 Bulma 有一个 .is-multiline 属性来实现这一点。你想把它添加到这个答案的顶部，我会接受吗？
@N.McA。更新了 2 个样本，一个正确溢出，一个换行到新行