为什么 Columns class 中的子项以单行显示？

Question

我正在使用 Bulma 框架开发 Web。

当我将 column 分类标签放入 columns 时，所有子标签都显示在一个原始页面中并从页面溢出！

我想在到达 columns 标签的末尾时打破原始状态。

我怎么了？

这是我的代码：

<div class="box">
  <div class="columns is-parent">
    <?php foreach($posts as $post) {?>
    <div class="column is-one-fifth is-child">
      <div class="card">
            <div class="card-image">
              <figure class="image is-4by3"> <img src="" alt="Image"> </figure>
            </div>
            <div class="card-content">
              <div class="content">
                <div class="card-title has-text-link"><?php echo $post->title; ?></div>
                <small><?php echo strip_tags(word_limiter($post->content,50)); ?></small>
                <a>#css</a>
                <a>#responsive</a>
                <br> <small>11:09 PM - 1 Jan 2016</small>
              </div>
            </div>
          </div>
        </div>
      <?php } ?>
  </div>
</div>

Answer 1

我只添加了 is-multiline 到父标签：

<div class="columns is-parent is-multiline" >

问题已解决

为什么 Columns class 中的子项以单行显示？

Why childs inside Columns class display in single line?

css

bulma