我正在使用bootstrap布局的网站上工作。 我有2列 - 宽度3和宽度9.3宽的列包含来自1个源的数据，9个宽来自另一个数据源 - 所以我可以将它们放在12列布局中
我希望每个数据集都具有相同的高度，因此我将其设为flexbox：
<div class="col col-xs-12 entirepage">
<xsl:attribute name="style">border:1px solid #333;</xsl:attribute>
<h3>entirepage col-xs-12 header</h3>
<div class="row section">
<h3>Section header</h3>
<div class="col col-xs-3 theleftcol">
<h3>col-xs-3 header</h3>
<div class="row thecardholder">
<div class="col col-xs-12 thecard">
Lorem ipsum dolor sit amet, eu illud justo antiopam mei. Et vis possit conclusionemque. Eam ad vidisse regione, iusto delectus abhorreant ut sea. Sed dicit omnesque placerat eu, ferri temporibus te vel, et quis clita gubergren nam.
</div>
<div class="col col-xs-12 thecard">
Ad appareat lucilius mnesarchum nec. Abhorreant mnesarchum et sit, pro cu nibh fierent apeirian, an atomorum hendrerit duo. Nostro melius appellantur nam eu. Iusto labitur his no. Ei vim assum cotidieque efficiantur. Ex pri doming epicuri principes. Debet partem salutandi has ex, ea cum sumo nemore.
</div>
<div class="col col-xs-12 thecard">
Wisi inani feugiat nec ad. At ius eros fugit. Ut per graece alterum, ut ceteros pericula mea. Pri modo putent fabellas ut, graeci molestiae ne est.
</div>
<div class="col col-xs-12 thecard">
Blandit placerat quo et, nam at consetetur dissentias omittantur. Aeque saepe per et, at senserit molestiae constituam vix, quo cu graeco timeam. Nam vitae minimum et. Te vis porro atqui nonumes, sit vidisse urbanitas dissentiunt ad, eam ex periculis erroribus scribentur. Pri error partem id, te per postea hendrerit sadipscing. Ex detraxit menandri facilisis vix, duis perfecto perpetua mel ex.
</div>
<div class="col col-xs-12 thecard">
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[
</div>
</div>
</div>
<div class="col col-xs-9 therightcol">
<h3>col-xs-9 header</h3>
<div class="row thecardholder">
<div class="col col-xs-4 thecard">
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
</div>
<div class="col col-xs-4 thecard">
It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life
</div>
<div class="col col-xs-4 thecard">
One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
</div>
<div class="col col-xs-4 thecard">
She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
</div>
<div class="col col-xs-4 thecard">
he quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz.
</div>
<div class="col col-xs-4 thecard">
A very bad quack might jinx zippy fowls. Few quips galvanized the mock jury box. Quick brown dogs jump over the lazy fox. The jay, pig, fox, zebra, and my wolves quack! Blowzy red vixens fight for a quick jump. Joaquin Phoenix was gazed by MTV for luck. A wizard’s job is to vex chumps quickly in fog. Watch "Jeopardy!", Alex Trebek's fun TV quiz game. Woven silk pyjamas exchanged for blue quartz.
</div>
</div>
</div>
</div>
</div>
并使用以下css：
.entirepage {
padding: 5px;
.section {
padding: 5px;
.row.thecardholder {
border: 1px solid #666;
display: flex;
flex-wrap: wrap;
margin: 5px;
}
.theleftcol .col.thecard {
border: 1px solid #999;
margin: 5px;
flex: 0 1 auto;
}
.therightcol .col.thecard {
border: 1px solid #999;
margin: 5px;
flex: 0 1 auto;
width: calc( 33% - 14px);
}
}
}
似乎我不能跨越这两列的弹性过程，另外每一行看起来都有不同的高度（即使它们在同一个'行'中）。
在我继续这之前我需要知道......我是否以一种基本上不正确的方式接近了这个