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

Question

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

然而，重申一下：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>

Run Code Online (Sandbox Code Playgroud)

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

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

Answer 1

LGS*_*Son 8

原因是像元素这样的块，例如display: flex，它不会比其父元素增长得更大，因此会导致此溢出。

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

堆栈片段

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

堆栈片段

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，1 月前
查看次数：	3316 次
最近记录：	8 年，1 月前