Question

使用Bulma，当我让窗口变小时，我想要一个新的行左对齐。但是，当我添加第五列时，此列将转到页面的中间。当我添加第6列时，第五列将转到页面左侧的中间，第6列将转到页面右侧的中间。

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

1..2..3..4

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

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

1..2..3..4

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

但我希望这种情况发生：

1..2..3..4

5..6 ..

可以用Bulma完成吗？怎么样？或者我应该写css代码吗？

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

Answer 1

您可以将is-narrow class添加到您的列中。

您可以查看结果here。

如何将新列与Bulma对齐？

1 个答案: