web-dev-qa-db-ja.com

不規則bootstrap=列の折り返し

Rails 4.1.4のhaml、haml-Rails、sass、およびbootstrap-sassの最新リリースで実行します。ユーザー表示の場合、私のHAMLは次のとおりです。

.tutors-listing
    .row
      - @users.each do |tutor|
        .col-xs-12.col-md-3
          .row.tutor
            .col-xs-offset-1.col-xs-4.col-md-12
              = image_tag tutor.photo, :class => 'img-responsive img-circle tutor-photo'
              %h4.tutor-name
                = tutor.first_name

             %p
                teaches
             %strong.tutor-skills
               = tutor.teachables

ただし、このマークアップにより、次のグリッチが発生します。 Irregular column wrappingMore irregular column wrapping

私は誰かがここで何が悪いのかを判断できることを望んでいます。中程度のブレークポイントでは、4列が均等にあるはずです。

htmlcssruby-on-railstwitter-bootstraptwitter-bootstrap-3
51
Benoît

これは、2行以上のテキストのスキルが原因です。 floatプロパティを使用する場合の既知のバグです。以下に、理解するための小さな画像を示します。

enter image description here

[Bootply] The issue

オプション＃1：高さを強制する

最初のオプションは、要素に同じ高さを強制することです：

.tutor {
    height: 500px;
}
  • [プロ]シンプルでどこでも動作
  • [Con]マジックナンバーを使用する
  • [Con]スキルの行数を制限する
  • [Con] modileバージョンの無駄な空白

[Bootply] Force height

オプション＃2：clearfixを使用する

2番目のオプションは、clearfixを使用して、5番目の要素を強制的に新しい行に配置することです（9番目、13番目と同じ...）：

.tutors-listing > .row > .col-md-3:nth-child(4n+1) {
    clear: both;
}
  • [プロ]スキルの行数を制限しません
  • [Pro]無駄な空白はありません
  • [プロ]マジックナンバーなし
  • [Con]サイズごとに1つのCSSルール（xs/sm/md/lg）
  • [Con]ルールはグリッドによって異なります（.col-xx-3）

[Bootply] Clearfix

118
zessx

私の場合、大画面では行ごとに3項目、中画面では2項目、小画面では1項目を表示したかったのです。

背景色のコメントを解除して、エフェクトがトリガーされるタイミングを確認することもできます。

http://www.bootply.com/QOor73wFAY#

/* fixes for columns wrapping in odd ways due to variable height */
/* when showing 2 items per row, clear #1, 3, 5 */
@media (min-width: $screen-sm-min){
    .cell-box:nth-child(2n+1){
        clear: both;
        /* background-color: rgba(0, 0, 255, .5); /* blue */
    }
}
/* when showing 3 items per row, clear #1, 4, 7 */
@media (min-width: $screen-md-min){
    .cell-box:nth-child(2n+1){
        clear: none;
    }
    .cell-box:nth-child(3n+1){
        clear: both;
        /* background-color: rgba(0, 255, 0, .5); /* green */
    }
}
13
CocaLeaf

見た目では、すべての列を単一の行にレンダリングしています。 4列ごとに新しい行を開始するように変更する必要があります（つまり、普通の古いERBで）

  <% @users.each_slice(4).to_a.each do |chunk| %>
     <div class="row">
       <% chunk.each do |tutors| %>
         <div class="col-sm-3">
           ...
         </div>
       <% end %>
    </div>
  <% end %>

最初のループでto_aは必要ないかもしれません

1
ob264

時々、私もこの問題に遭遇します。不要なパディングやマージンを上書きすることをお勧めします。最初にマージンを0に変更してみてください。次に、パディングの一部を削除します。それは私のケースのいくつかに役立っています。

1
Zackery Gianotti