web-dev-qa-db-ja.com

Bootstrap列フロートの問題。DIVSは同じ高さである必要があります

私は動的に生成されたコンテンツを3つのbootstrapこのような列に形成しました...

<div class="col-md-4">
  <div class="article">
  content goes here
  </div>
</div>

問題は、列の内容が異なると、高さが異なるとレイアウトが台無しになることです。

これを回避するために、3項目ごとにクリア行を強制的に開始するにはどうすればよいですか？

だから基本的に...

enter image description here

htmlcsstwitter-bootstrapgrid
20
lowercase

これを回避するために、3項目ごとにクリア行を強制的に開始するにはどうすればよいですか？

クラスを追加して.your-class:nth-child(3n) {clear: left;}を試してください

14
Neps

このbootplyに示すように、display:flex;を使用して、行のdivに均一な高さを追加することもできます。 http://www.bootply.com/126437

HTML：

    <div class="container">
      <div class="row row-flex row-flex-wrap">
        <div class="col-md-4">
          <div class="article flex-col">
              content goes here
          </div>
        </div>
        <div class="col-md-4">
          <div class="article flex-col">
              content goes here
          </div>
        </div>
        <div class="col-md-4">
          <div class="article flex-col">
              content goes here
          </div>
        </div>
      </div>
    </div>

CSS：

.row-flex, .row-flex > div[class*='col-'] {  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex:1 1 auto;
}

.row-flex-wrap {
    -webkit-flex-flow: row wrap;
    align-content: flex-start;
    flex:0;
}

.row-flex > div[class*='col-'], .container-flex > div[class*='col-'] {
     margin:-.2px; /* hack adjust for wrapping */
}

.container-flex > div[class*='col-'] div,.row-flex > div[class*='col-'] div {
    width:100%;
}


.flex-col {
    display: flex;
    display: -webkit-flex;
    flex: 1 100%;
    flex-flow: column nowrap;
}
8
AndrewL64

グリッドネスティング の使用：

<div class='row'>
    <div class='col-md-4'>
    </div>
    <div class='col-md-4'>
    <div class='col-md-4'>
        <div class='row'>
            <div class='col-md-12'>
            </div>
        </div>
        <div class='row'>
            <div class='col-md-12'>
            </div>
        </div>
    </div>
</div>
<div class='row'>
    <div class='col-md-4'>
    </div>
    <div class='col-md-4'>
    </div>
    <div class='col-md-4'>
    </div>
</div
1
Tui Popenoe

少し遅れましたが、誰かがこれに満足しているかもしれません：

すべての列の幅が同じである場合は、次の操作を実行できます（このCSSでは、すべてのブレークポイントのサイズを指定する必要があります）

//Used to generate the html, not relevant to this question
for(var i=0;i<50;i++){
  jQuery(".row").append(
    '<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-xl-3">'+
    '<h1>Title '+i+'</h1>'+
    '<img src="http://lorempixel.com/'+getRandomInt(300, 700)+'/'+getRandomInt(200, 800)+'">'+
  '</div>');
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
@media (min-width: 0) and (max-width: 544px) {
    .row.same-width .col-xs-1:nth-child(12n + 13), html body > div.container ul.products .col-xs-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-xs-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-xs-2:nth-child(6n + 7), html body > div.container ul.products .col-xs-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-xs-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-xs-3:nth-child(4n + 5), html body > div.container ul.products .col-xs-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-xs-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-xs-4:nth-child(3n + 4), html body > div.container ul.products .col-xs-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-xs-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-xs-6:nth-child(2n + 3), html body > div.container ul.products .col-xs-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-xs-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-xs-12:nth-child(1n + 2), html body > div.container ul.products .col-xs-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-xs-12:nth-child(1n + 2) {
        clear: left
    }
}

@media (min-width: 544px) and (max-width: 768px) {
    .row.same-width .col-sm-1:nth-child(12n + 13), html body > div.container ul.products .col-sm-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-sm-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-sm-2:nth-child(6n + 7), html body > div.container ul.products .col-sm-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-sm-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-sm-3:nth-child(4n + 5), html body > div.container ul.products .col-sm-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-sm-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-sm-4:nth-child(3n + 4), html body > div.container ul.products .col-sm-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-sm-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-sm-6:nth-child(2n + 3), html body > div.container ul.products .col-sm-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-sm-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-sm-12:nth-child(1n + 2), html body > div.container ul.products .col-sm-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-sm-12:nth-child(1n + 2) {
        clear: left
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .row.same-width .col-md-1:nth-child(12n + 13), html body > div.container ul.products .col-md-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-md-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-md-2:nth-child(6n + 7), html body > div.container ul.products .col-md-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-md-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-md-3:nth-child(4n + 5), html body > div.container ul.products .col-md-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-md-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-md-4:nth-child(3n + 4), html body > div.container ul.products .col-md-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-md-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-md-6:nth-child(2n + 3), html body > div.container ul.products .col-md-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-md-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-md-12:nth-child(1n + 2), html body > div.container ul.products .col-md-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-md-12:nth-child(1n + 2) {
        clear: left
    }
}

@media (min-width: 992px) and (max-width: 1200px) {
    .row.same-width .col-lg-1:nth-child(12n + 13), html body > div.container ul.products .col-lg-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-lg-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-lg-2:nth-child(6n + 7), html body > div.container ul.products .col-lg-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-lg-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-lg-3:nth-child(4n + 5), html body > div.container ul.products .col-lg-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-lg-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-lg-4:nth-child(3n + 4), html body > div.container ul.products .col-lg-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-lg-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-lg-6:nth-child(2n + 3), html body > div.container ul.products .col-lg-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-lg-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-lg-12:nth-child(1n + 2), html body > div.container ul.products .col-lg-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-lg-12:nth-child(1n + 2) {
        clear: left
    }
}

@media (min-width: 1200px) {
    .row.same-width .col-xl-1:nth-child(12n + 13), html body > div.container ul.products .col-xl-1:nth-child(12n + 13),
    html body > div.container-fluid ul.products .col-xl-1:nth-child(12n + 13) {
        clear: left
    }

    .row.same-width .col-xl-2:nth-child(6n + 7), html body > div.container ul.products .col-xl-2:nth-child(6n + 7),
    html body > div.container-fluid ul.products .col-xl-2:nth-child(6n + 7) {
        clear: left
    }

    .row.same-width .col-xl-3:nth-child(4n + 5), html body > div.container ul.products .col-xl-3:nth-child(4n + 5),
    html body > div.container-fluid ul.products .col-xl-3:nth-child(4n + 5) {
        clear: left
    }

    .row.same-width .col-xl-4:nth-child(3n + 4), html body > div.container ul.products .col-xl-4:nth-child(3n + 4),
    html body > div.container-fluid ul.products .col-xl-4:nth-child(3n + 4) {
        clear: left
    }

    .row.same-width .col-xl-6:nth-child(2n + 3), html body > div.container ul.products .col-xl-6:nth-child(2n + 3),
    html body > div.container-fluid ul.products .col-xl-6:nth-child(2n + 3) {
        clear: left
    }

    .row.same-width .col-xl-12:nth-child(1n + 2), html body > div.container ul.products .col-xl-12:nth-child(1n + 2),
    html body > div.container-fluid ul.products .col-xl-12:nth-child(1n + 2) {
        clear: left
    }
}

.row img{
  width: 100%;
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row same-width"></div>

SCSSを使用している場合は、全体が少しきれいになります。

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 544px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
) !default;

$grid-columns:               12 !default;

.row.same-width{
    $break-values: map-keys($grid-breakpoints);
    @each $breakpoint in $break-values{

        @if(index($break-values, $breakpoint) < length($break-values)){
            @media (min-width: #{map-get($grid-breakpoints, $breakpoint)}) and (max-width: #{map-get($grid-breakpoints, nth($break-values, index($break-values, $breakpoint)+1))}){
                @for $i from 1 through $grid-columns {
                    @if($grid-columns % $i == 0){
                        .col-#{$breakpoint}-#{$i}:nth-child(#{($grid-columns/$i)}n + #{($grid-columns/$i)+1}){
                            clear: left;
                        }
                    }
                }
            }
        }@else{
            @media (min-width: #{map-get($grid-breakpoints, $breakpoint)}){
                @for $i from 1 through $grid-columns {
                    @if($grid-columns % $i == 0){
                        .col-#{$breakpoint}-#{$i}:nth-child(#{($grid-columns/$i)}n + #{($grid-columns/$i)+1}){  
                            clear: left;
                        }
                    }
                }
            }
        }
    }
}
1
Nico Hauser

次のように均一なレイアウトを維持するには、列divにmin-heightを追加するだけです。

HTML：

<div class="row">
  <div class="col-md-4">
    <div class="article">
    content goes here
    </div>
  </div>
  <div class="col-md-4">
    <div class="article">
    content goes here
    </div>
  </div>
  <div class="col-md-4">
    <div class="article">
    content goes here
    </div>
  </div>
</div>

CSS：

.col-md-4 {
    min-height: 200px; /* change to the height value of the longest column in the row */
}
1
AndrewL64