Как выровнять новый столбец слева с Bulma?

Используя Bulma, я бы хотел, чтобы новая строка была выровнена по левому краю, когда я уменьшу окно. Однако, когда я добавляю пятый столбец, этот столбец переходит в середину страницы. Когда я добавляю 6-й столбец, пятый столбец переходит в середину левой части страницы, а 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>

Источник

1 ответ

Решение

Вы можете добавить is-narrow класс для ваших столбцов.

Вы можете проверить результаты здесь.

Источник
Другие вопросы по тегам