[英]Bootstrap 3.0 grids - how to transpose them in vertical?
I'm using Bootstrap grids, and was searching for a fast / non-invasive way for showing in vertical some elements using a grid. 我正在使用Bootstrap网格,并且正在寻找一种快速/非侵入性的方法来使用网格垂直显示某些元素。
For example, if usually I'd obtain (ie using col-md-3): 例如,如果通常我会获得(即使用col-md-3):
A B C D
E F G H
I L M N
O P Q R
in my version I would have "transposed" version: 在我的版本中,我将使用“移调”版本:
A E I O
B F L P
C G M Q
D H N R
IS that just server-side problem, or there is a way for doing that with grids CSS and/or javascript? 这仅仅是服务器端的问题,还是有一种使用CSS和/或javascript网格的方法?
S 小号
In your original example it looks like you are opening a ul
tag and then giving each li
a class of col-md-3
. 在您的原始示例中,您好像打开了
ul
标签,然后为每个li
了一类col-md-3
。
What you could do to achieve the desired result is open up 4 ul
tags instead (one for each column) and give each a class of col-md-3
. 您可以做的是获得4个
ul
标签(每列一个),为每个标签分配一类col-md-3
以实现所需的结果。 Then the li
tags inside these ul
tags will not need any class on them. 然后,这些
ul
标签中的li
标签将不需要任何类。
Here is what that code would look like: 该代码如下所示:
<ul class="col-md-3">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<ul class="col-md-3">
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
</ul>
<ul class="col-md-3">
<li>I</li>
<li>L</li>
<li>M</li>
<li>N</li>
</ul>
<ul class="col-md-3">
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
</ul>
This may not be exactly how you were looking to accomplish this, but this will achieve the desired result. 这可能与您要实现此目标的方式不完全相同,但这将达到预期的结果。 I hope this helps!
我希望这有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.