Question

充分说明了该问题。

但是要重申一下：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溢出了右侧的模态。

有人知道这是为什么吗？如何阻止它发生？当然，这是一个flexbox问题，但是CSS并不是我真正的领域。欢迎提供任何有关使该问题更广泛适用所需的信息的意见（就布尔玛框架内使用的CSS而言）。

Answer 1

原因是块之类的元素，例如display: flex是，它的大小不会超过其父项，因此会导致此溢出。

如果将#my-columns设置为 inline-flex ，则可以使用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>

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

1 个答案: