grid - 如何将新列与布尔玛对齐？

问题描述

使用 Bulma，当我缩小窗口时，我希望新行左对齐。但是，当我添加第五列时，该列会转到页面的中间。当我添加第 6 列时，第 5 列位于页面左侧的中间，第 6 列位于页面右侧的中间。

因此，当我添加第 5 列时，会发生这种情况：

1..2..3..4

......5......

当我添加第 6 列时，会发生这种情况：

1..2..3..4

...5....6...

但我希望这种情况发生：

1..2..3..4

5..6..

布尔玛可以做到吗？如何？还是我应该写css代码？

.textWithBlurredBg{
    width:192px;
    height:256px;
    display:inline-block;
    position:relative;
    transition:.3s;
    margin:1px;
  }
  
  .textWithBlurredBg img{
    width:100%;
    height:100%;
    transition:.3s;
    border-radius:4px;
  }
  
  .textWithBlurredBg:hover img{
    filter:blur(2px) brightness(60%);
    box-shadow:0 0 16px cyan;
  }
   
  .textWithBlurredBg :not(img){
    position:absolute;
    z-index:1;
    top:30%;
    width:100%;
    text-align:center;
    color:#fff;
    opacity:0;
    transition:.3s;
  }
  
  .textWithBlurredBg h3{
    top:70%
  }
  
  .textWithBlurredBg:hover :not(img){
    opacity:1;
  }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css" rel="stylesheet"/>
    <div class="columns is-multiline is-mobile">
      <div class="column has-text-centered is-narrow">
        <figure class="image textWithBlurredBg">
      		<img src="https://images.unsplash.com/photo-1519262113844-152510a1d98a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=11972b5dd562c360eeb4941abd19ca2e&auto=format&fit=crop&w=400&q=60">
      		<h2 class="title">Name</h2>
      		<h3 class="subtitle">Job Title</h3>
    	</figure>
      </div>
      <div class="column has-text-centered">
        <figure class="image textWithBlurredBg">
    	     <img src="https://images.unsplash.com/photo-1515621061946-eff1c2a352bd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=201965739764d1554eaa299d8a458d7d&auto=format&fit=crop&w=722&q=80">
    	    <h2 class="title">Name</h2>
      		<h3 class="subtitle">Job Title</h3>
    	</figure>
      </div>
      <div class="column has-text-centered">
        <figure class="image textWithBlurredBg">
        	<img src="https://images.unsplash.com/photo-1508341591423-4347099e1f19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b83c9d9a71fa57a216d3343f40c3747c&auto=format&fit=crop&w=400&q=60">
        	<h2 class="title">Name</h2>
      		<h3 class="subtitle">Job Title</h3>
        </figure>
      </div>
      <div class="column has-text-centered">
        <figure class="image textWithBlurredBg">
        	<img src="https://images.unsplash.com/photo-1524828121784-0b7e1d73a23a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c0a4b85a56023ce08b1bc8af202400a8&auto=format&fit=crop&w=400&q=60">
        	<h2 class="title">Name</h2>
      		<h3 class="subtitle">Job Title</h3>
        </figure>
      </div>
      <div class="column has-text-centered">
        <figure class="image textWithBlurredBg">
        	<img src="https://images.unsplash.com/photo-1508341591423-4347099e1f19?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b83c9d9a71fa57a216d3343f40c3747c&auto=format&fit=crop&w=400&q=60">
        	<h2 class="title">Name</h2>
      		<h3 class="subtitle">Job Title</h3>
        </figure>
      </div>
      <div class="column has-text-centered">
        <figure class="image textWithBlurredBg">
        	<img src="https://images.unsplash.com/photo-1524828121784-0b7e1d73a23a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c0a4b85a56023ce08b1bc8af202400a8&auto=format&fit=crop&w=400&q=60">
        	<h2 class="title">Name</h2>
      		<h3 class="subtitle">Job Title</h3>
        </figure>
      </div>
    </div>

标签： gridmultiple-columnsmultilinebulmaleftalign

grid - 如何将新列与布尔玛对齐？

问题描述

解决方案

推荐阅读