テーブルのレイアウトとフロート左とブートストラップグリッド

Question

私はこの質問のために調査しましたが、満足のいく回答は得られませんでした。私はブートストラップのグリッドレイアウトを使用しています。

Fiddle hereを見て、出力ウィンドウのサイズを変更してください - あなたのサイズを変更しながら、十分な大規模な未亡人の大きさは、私のテーブルレイアウト区切りを COL-SM-クラスを追加するときことに気づいたかもしれません。

私が欲しいのは、両列の高さが互いに隣り合っていれば（最大の要素の高さ）、それらが上下にあるときは、それぞれの高さをとる必要があります今）。

HTML

<div class="container"> 
<div class="architect-table"> 
    <div class="row"> 
     <div class="cell column-1 col-xs-12 col-sm-6"> abcde </div> 
     <div class="cell column-2 col-xs-12 col-sm-6"> abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde </div> 
    </div> 
</div> 

CSS

.architect-table { 
    display: table; 
    width: 100%; 
} 

.row { 
    display: table-row; 
} 

.cell { 
    display: table-cell; 
    min-height: 44px; 
    border: 1px solid black; 
} 

私が知っているしかし、私はfloat: leftスタイルを削除すると、すべてが正常に動作します。しかし、私はブートストラップのグリッドレイアウトが必要なので、私はできません。どんな助けもありがとう。

Answer 1

を使用しないで、あなたのrowラップflexbox - デモ下記参照：

を

.architect-table { 
 
    width: 100%; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.architect-table > .row > .cell { 
 
    min-height: 44px; 
 
    border: 1px solid black; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
 

 
<div class="container"> 
 
    <div class="architect-table"> 
 
    <div class="row"> 
 
     <div class="cell column-1 col-xs-12 col-sm-6">abcde</div> 
 
     <div class="cell column-2 col-xs-12 col-sm-6">abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde 
 
     abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde abcde</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

私は悲しいことですが、現時点ではブートストラップにはこの機能がありません.2つの同じ高さにしたい場合は、cols次回はJSで遊ぶ必要があります。あなたを助けることができる、通常私はjQuery.matchHeightを使用するので使いやすいです。

ベストソリューション、あなたが作ることができますが、この動作をしたい時にブートストラップグリッドを使用してflexboxがオプションである場合flex :)

Answer 3

あなたはフレックスを使用することができます。これをチェックしてくださいfiddle

.row { 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display:   flex; 
    flex-wrap: wrap; 
} 
.row > [class*='col-'] { 
    display: flex; 
    flex-direction: column; 
}