web-dev-qa-db-ja.com

マルチレスポンシブ列を実行するときに行をクリアする-Bootstrap

そのタイトルはそれほど正確ではないかもしれませんが、状況は次のとおりです。

The html that does not look properThe view that does not look proper HTMLで見ることができるように、グリッドシステムは xl画面上の4つの画像 lg画面では3からそれ以下では2。

私はそれを適切に表示しようとしています-各画面サイズで適切な量の画像、つまりです。ただし、何かファンキーなことが起こっており、ブートストラップクラスを使用してそれを把握することはできません。

ブレークポイントごとに行を動的に追加する必要があるように思えます。

助言がありますか？

-更新- col-xl- *が存在しないことに気付きました。ただし、それによって状況はまったく変わりません。 xl宣言は無視してください。

-更新2- 画像を更新しました。

-更新3- 目標を明確にしようと思います。投稿に添付されている特定の画像については、すべてのシェルタースケルターではなく、行ごとに3つのボックスを表示したいと思います。

行（xsデバイス）ごとに2つのボックスに折りたたまれたら、すべての行に2つのボックスがあることを確認します。

twitter-bootstraptwitter-bootstrap-3grid-system
56
karns

clearfix要素を必要な場所に追加することで、この問題を解決しました。 mdに3列、smに2列が必要でしたが、次のようにしました。

<div class="row">
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="col-sm-6 col-md-4"></div>
    <div class="clearfix visible-md"></div>
    <div class="clearfix visible-sm"></div>
    <div class="col-sm-6 col-md-4"></div>
</div>

だから私はclearfix visible-sm 2 divごとにclearfix visible-md 3 divごとに。このソリューションは理想的ではありませんが、かなりうまくいきます。

EDIT：Bootstrap v3.2.0 .visible-*クラスは非推奨です。

http://getbootstrap.com/css/#responsive-utilities ：

クラス.visible-xs、.visible-sm、.visible-md、および.visible-lgも存在しますが、v3.2.0で非推奨になりました。これらは、関連要素を切り替える特別な場合を除いて、.visible-*-blockとほぼ同等です。

EDIT 2：このソリューションは、CSSを編集したくない限り機能します。そうするオプションがあれば、使用することをお勧めします- ジョナスの答え 私の意見ではずっと簡単だから。

41
Dygestor

このcssでbootstrap.cssを拡張します。

@media (min-width:1200px){
    .auto-clear .col-lg-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-lg-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-lg-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-lg-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-lg-6:nth-child(odd){clear:left;}
}
@media (min-width:992px) and (max-width:1199px){
    .auto-clear .col-md-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-md-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-md-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-md-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-md-6:nth-child(odd){clear:left;}
}
@media (min-width:768px) and (max-width:991px){
    .auto-clear .col-sm-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-sm-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-sm-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-sm-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-sm-6:nth-child(odd){clear:left;}
}
@media (max-width:767px){
    .auto-clear .col-xs-1:nth-child(12n+1){clear:left;}
    .auto-clear .col-xs-2:nth-child(6n+1){clear:left;}
    .auto-clear .col-xs-3:nth-child(4n+1){clear:left;}
    .auto-clear .col-xs-4:nth-child(3n+1){clear:left;}
    .auto-clear .col-xs-6:nth-child(odd){clear:left;}
}

次のように使用します。

<div class="row auto-clear">
    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-3">
        <p>Hey</p>
    </div>
</div>

注：これには、すべてのcol-sizeを使用する必要があり、すべてのcolが同じサイズである必要があります。

66
Jonas Äppelgran

@jonasおよび@yogから取得したbootstrap変数を使用した.scss修正

@mixin row-first-child($col-type) {
  .col-#{$col-type}- {
    &1:nth-child(12n+1),
    &2:nth-child(6n+1),
    &3:nth-child(4n+1),
    &4:nth-child(3n+1),
    &6:nth-child(odd){
      clear: left;
    }
  }
} 

.auto-clear {
  @media (min-width: $screen-lg-min){
    @include row-first-child(lg);
  }
  @media (min-width: $screen-md-min) and (max-width: $screen-md-max){
    @include row-first-child(md);
  }
  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
    @include row-first-child(sm);
  }
  @media (max-width: $screen-xs-max){
    @include row-first-child(xs);
  }
}
11
KFunk

レイアウトが壊れる理由は、表示される画像の動的な高さによるものです。ただし、修正は簡単で、画像の高さを制限するだけです。例えば

HTML

<div class="container">
  <div class="row">
    <div id="uploaded">
      <div class="col-xs-6 col-lg-4">
        <div class="file-block">
          <div class="file-thumbnail">
            <img src="http://placehold.it/200x500" alt="">
          </div>
          <div class="file-row-footer">
            <a href="javascript:void(0)"> Delete</a>
          </div>
        </div>
      </div>

      <div class="col-xs-6 col-lg-4">
        <div class="file-block">
          <div class="file-thumbnail">
            <img src="http://placehold.it/200x500" alt="">
          </div>
          <div class="file-row-footer">
            <a href="javascript:void(0)"> Delete</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.file-block {
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 20px 0px;
  text-align: center;
}

.file-thumbnail {
  display: block;
  padding: 4px;
  margin-bottom: 20px;
  line-height: 1.42857143;
  height: 180px;
  font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.file-thumbnail:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;  /* vertical alignment of the inline element */
  height: 100%;
}

.file-thumbnail img {
  display: inline-block;
  margin: 0 auto;
  max-width: 150px;
  max-height: 180px;
  vertical-align: middle;
}

CodePen をチェックして、動作を確認してください。お役に立てれば。

3
Bart Jedrocha

IE8をサポートする必要がない場合、cssでこれを非常に簡単に修正できます。

.file-row-contain.col-lg-4:nth-child(3n+1),
.file-row-contain.col-xs-6:nth-child(2n+1) { 
    clear: left; 
}

例 を参照してください

1
Rob

@Jonasと@KFunkの答えに追加：

すべてのcol-size（col-xs-6 col-sm-4 col-md-4 col-lg-4）の使用を要求する潜在的な修正。

作成されたクラス：auto-clear-xs、auto-clear-sm、auto-clear-md、auto-clear-lg。

私は答えをモバイルファーストにしました。

注：これは、列が同じサイズである必要があります。

[〜＃〜] html [〜＃〜]

<div class="row auto-clear-xs auto-clear-lg">
    <div class="col-xs-6 col-lg-3">
        <p>Hey</p>
    </div>
</div>

[〜＃〜] scss [〜＃〜]

@mixin row-first-child($col-type, $clear-type) {
   .col-#{$col-type}- {
    &1:nth-child(12n+1),
    &2:nth-child(6n+1),
    &3:nth-child(4n+1),
    &4:nth-child(3n+1),
    &6:nth-child(odd){
      clear: $clear-type;
    }
  }
}

.auto-clear-xs{
  @media (min-width: $screen-xs-min){
    @include row-first-child(xs, both);
}
  @media (max-width: $screen-xs-min){
    @include row-first-child(xs, both);
  }
}

.auto-clear-sm{
  @media (min-width: $screen-sm){
    @include row-first-child(xs, none);
    @include row-first-child(sm, both);
  }
}

.auto-clear-md{
  @media (min-width: $screen-md){
    @include row-first-child(xs, none);
    @include row-first-child(sm, none);
    @include row-first-child(md, both);
  }
}

.auto-clear-lg{
  @media (min-width: $screen-lg){
    @include row-first-child(xs, none);
    @include row-first-child(sm, none);
    @include row-first-child(md, none);
    @include row-first-child(lg, both);
  }
}

[〜＃〜] css [〜＃〜]

@media (min-width: 480px) {
  .auto-clear-xs .col-xs-1:nth-child(12n+1), 
  .auto-clear-xs .col-xs-2:nth-child(6n+1), 
  .auto-clear-xs .col-xs-3:nth-child(4n+1), 
  .auto-clear-xs .col-xs-4:nth-child(3n+1), 
  .auto-clear-xs .col-xs-6:nth-child(odd) {
    clear: both;
  }
}
@media (max-width: 480px) {
  .auto-clear-xs .col-xs-1:nth-child(12n+1), 
  .auto-clear-xs .col-xs-2:nth-child(6n+1), 
  .auto-clear-xs .col-xs-3:nth-child(4n+1), 
  .auto-clear-xs .col-xs-4:nth-child(3n+1), 
  .auto-clear-xs .col-xs-6:nth-child(odd) {
    clear: both;
  }
}


@media (min-width: 768px) {
  .auto-clear-sm .col-xs-1:nth-child(12n+1), 
  .auto-clear-sm .col-xs-2:nth-child(6n+1), 
  .auto-clear-sm .col-xs-3:nth-child(4n+1), 
  .auto-clear-sm .col-xs-4:nth-child(3n+1), 
  .auto-clear-sm .col-xs-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-sm .col-sm-1:nth-child(12n+1), 
  .auto-clear-sm .col-sm-2:nth-child(6n+1), 
  .auto-clear-sm .col-sm-3:nth-child(4n+1), 
  .auto-clear-sm .col-sm-4:nth-child(3n+1), 
  .auto-clear-sm .col-sm-6:nth-child(odd) {
    clear: both;
  }
}

@media (min-width: 992px) {
  .auto-clear-md .col-xs-1:nth-child(12n+1), 
  .auto-clear-md .col-xs-2:nth-child(6n+1), 
  .auto-clear-md .col-xs-3:nth-child(4n+1), 
  .auto-clear-md .col-xs-4:nth-child(3n+1), 
  .auto-clear-md .col-xs-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-md .col-sm-1:nth-child(12n+1), 
  .auto-clear-md .col-sm-2:nth-child(6n+1), 
  .auto-clear-md .col-sm-3:nth-child(4n+1), 
  .auto-clear-md .col-sm-4:nth-child(3n+1), 
  .auto-clear-md .col-sm-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-md .col-md-1:nth-child(12n+1), 
  .auto-clear-md .col-md-2:nth-child(6n+1), 
  .auto-clear-md .col-md-3:nth-child(4n+1), 
  .auto-clear-md .col-md-4:nth-child(3n+1), 
  .auto-clear-md .col-md-6:nth-child(odd) {
    clear: both;
  }
}

@media (min-width: 1200px) {
  .auto-clear-lg .col-xs-1:nth-child(12n+1), 
  .auto-clear-lg .col-xs-2:nth-child(6n+1), 
  .auto-clear-lg .col-xs-3:nth-child(4n+1), 
  .auto-clear-lg .col-xs-4:nth-child(3n+1), 
  .auto-clear-lg .col-xs-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-lg .col-sm-1:nth-child(12n+1), 
  .auto-clear-lg .col-sm-2:nth-child(6n+1), 
  .auto-clear-lg .col-sm-3:nth-child(4n+1), 
  .auto-clear-lg .col-sm-4:nth-child(3n+1), 
  .auto-clear-lg .col-sm-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-lg .col-md-1:nth-child(12n+1), 
  .auto-clear-lg .col-md-2:nth-child(6n+1), 
  .auto-clear-lg .col-md-3:nth-child(4n+1), 
  .auto-clear-lg .col-md-4:nth-child(3n+1), 
  .auto-clear-lg .col-md-6:nth-child(odd) {
    clear: none;
  }
  .auto-clear-lg .col-lg-1:nth-child(12n+1), 
  .auto-clear-lg .col-lg-2:nth-child(6n+1), 
  .auto-clear-lg .col-lg-3:nth-child(4n+1), 
  .auto-clear-lg .col-lg-4:nth-child(3n+1), 
  .auto-clear-lg .col-lg-6:nth-child(odd) {
    clear: both;
  }
}
1
e.g-m

あなたの問題の唯一の解決策は、あなたの問題を引き起こす矛盾がないように要素に最小高さまたは固定高さを設定することです。

これを追加：

.file-row-contain {
  min-height:250px;
}

...必要に応じて高さを設定

0
scooterlord

それが実際にそうなっているはずです。 Bootstrapグリッドは12列で構成されており、1つのlgアイテムのサイズを4/12（3番目）、xsアイテムのサイズを6/12（使用可能な半分）にするよう指示しています。幅。

適用されたスタイルを確認すると、col-xs-6は1つの項目の幅を50％に設定し、col-lg-4を33.33％に設定するのと同じであることがわかります。

グリッドシステムの詳細については、こちらをご覧ください こちら

編集：私は今あなたの問題を理解していると思う、あなたのコードを見ずに私はおそらくあなたに正確な解決策を与えることはできません。ただし、問題はボックスの高さが可変であるように思われます。すべて同じ高さの場合、1行あたりのボックスの量が適切になります。

0
Faro

ブートストラップ4では、hidden-*-upおよびhidden-*-downクラスが導入されています。このような状況に非常に便利な（そしてエレガントな）ユーティリティ。

利用可能なクラス

  • .hidden-*-upクラスは、ビューポートが指定されたブレークポイント以上にあるときに要素を非表示にします。たとえば、.hidden-md-upは、中、大、特大のビューポートで要素を非表示にします。
  • .hidden-*-downクラスは、ビューポートが指定されたブレークポイント以下にあるときに要素を非表示にします。たとえば、.hidden-md-downは、超小、小、中のビューポートで要素を非表示にします。
  • 明示的な「表示」/「表示」レスポンシブユーティリティクラスはありません。そのブレークポイントサイズで単純に非表示にしないことで、要素を表示します。
  • 1つの.hidden-*-upクラスを1つの.hidden-*-downクラスと組み合わせて、画面サイズの特定の間隔でのみ要素を表示できます。たとえば、.hidden-sm-down.hidden-xl-upは、中規模および大規模のビューポートでのみ要素を表示します。複数の.hidden-*-upクラスまたは複数の.hidden-*-downクラスを使用することは冗長で無意味です。
  • これらのクラスは、要素の可視性をビューポートブレークポイントサイズの単一の連続した範囲として表現できない、あまり一般的でないケースに対応しようとはしていません。そのような場合は、代わりにカスタムCSSを使用する必要があります。

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

0
matt

私もソリューションを探していましたが、HTMLがCMSを介してレンダリングされるため、受け入れられた回答のソリューションを使用できませんでした。

だから私の解決策は：

.teaser {
  // break into new line after last element
  > div:last-child {
    clear: right;
  }
}

.teaser {
  // two colums
  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    > div:nth-child(2n+1) {
      clear: left;
    }
  }
}

.teaser {
  // three colums
  @media (min-width: @screen-md-min) {
    > div:nth-child(3n+1) {
      clear: left;
    }
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row teaser">
    <div class="col-sm-6 col-md-4">div1</div>
    <div class="col-sm-6 col-md-4">div2<br>more content</div>
    <div class="col-sm-6 col-md-4">div3</div>
    <div class="col-sm-6 col-md-4">div4</div>
    <div class="col-sm-6 col-md-4">div5<br>more content content<br>content</div>
    <div class="col-sm-6 col-md-4">div6</div>
    <div class="col-sm-6 col-md-4">div7<br>more content</div>
    <div class="col-sm-6 col-md-4">div8</div>
</div>

これが誰かを助けることを願っています:-)

0
chris

行内の_col-_ボックスの数が[〜＃〜] dynamic [〜＃〜]であり、私の場合のように_col-_クラスはモジュラス演算子を実行します。以下の例をご覧ください。

_<div class="row">
    <?php $elementCounter = 0; ?>
    <?php foreach ( $this->programs as $program ): ?>
        <div class="col-xs-6 col-sm-3"> DATA </div>
        <?php $elementCounter++; ?>
        <?php if( $elementCounter % 4 == 0 ): ?>
            <div class="clearfix hidden-xs"></div>
        <?php elseif( $elementCounter % 2 == 0 ): ?>
            <div class="clearfix visible-xs"></div>
        <?php endif; ?>
    <?php endforeach; ?>
</div>
_

col-xs-6は、超小型デバイス用の行に2つのボックスがあることを意味します。そのため、その_$elementCounter % 2 == 0_条件を追加したので、2番目の要素（AFTER）ごとにtrueです。また、clearfixを_visible-xs_とともに追加したため、デスクトップや他の解像度に影響を与えません。

col-sm-は、小型デバイス以上のデバイスでは4つの行のボックスを意味するため、その場合は_$elementCounter % 4 == 0_を追加し、その_hidden-xs_を追加してxsのclearfixを非表示にしますデバイスと小さいと上に表示されます。これにより、それに応じて変更できます。

0
Shahzaib Hayat Khan