劃分柔性柱分成兩行

Question

我有以下幾列（提琴：https://jsfiddle.net/DTcHh/15420/embedded/result/）

列的同一高度與flex實現：

@media (min-width: 992px) { 
     .columns-equal { 
      display: -webkit-box; 
      display: -webkit-flex; 
      display: -ms-flexbox; 
      display: flex; 
    } 
} 

（媒體用於保持響應）

如何才能將第二列分成填滿整列的兩行？例如： -

（我要讓行的內容居中）

是flex好辦法？我相信我可以使用表格顯示，但它會降低響應速度。

Answer 1

您也可以將col-bordered元素display設置爲flex，並使用column nowrap的flex-flow。在col-bordered的子元素上設置flex至1將強制它們具有相同的高度。

我也設置flex屬性col-bordered到0 1 50%給他們一個相等的寬度。

這裏是例子。

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body { 
 
    margin: 10px; 
 
} 
 

 
.columns-equal { 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 

 
.col-bordered { 
 
    display: flex; 
 
    flex-flow: column nowrap; 
 
    flex: 0 1 50%; 
 
} 
 

 
.col-bordered div { 
 
    flex: 1; 
 
} 
 

 
.row-acc-1 { 
 
    background-color: green 
 
} 
 

 
.row-acc-2 { 
 
    background-color: red 
 
} 
 

 
.col-bordered { 
 
    border: 2px solid black 
 
}

<div class="container"> 
 
    <div class="row columns-equal"> 
 
    <div class="col-md-6 col-bordered"> 
 
     <span> 
 
     Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem Lorem 
 
     </span> 
 
    </div> 
 
    <div class="col-md-6 col-bordered"> 
 
     <div class="row row-acc-1"> 
 
     <a>Test</a> 
 
     </div> 
 
     <div class="row row-acc-2"> 
 
     <a>Test 2</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>