首页 > 解决方案 > 为什么 Columns 类中的子项以单行显示?

问题描述

我正在使用Bulma框架开发一个网络。

当我将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>

在此处输入图像描述

标签: cssbulma

解决方案


我只添加is-multiline到父标签:

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

问题解决了


推荐阅读