Question

现在我知道Bootstrap 3.x已经出局了，我应该转到3.x.但是，这是一个在使用Bootstrap 2.3.1的现有站点中出现的更改请求。

这就是我想要实现的目标：

我在12列引导网格中使用3列布局：

<div class='row'>
  <div class='span3'></div>
  <div class='span6'></div>
  <div class='span3'></div>
</div>

所需的响应行为是：

大屏幕：

[ X ][ Y Y ][ Z ]

平板电脑肖像：

[ Y    Y ]
[ X ][ Z ]

较小的屏幕：

[YY]
[X]
[Z]

现在，我知道可以使用grid column ordering of Bootstrap 3.x来实现。但是，我需要使用Bootstrap 2.3实现这一目标。

Fiddle for those willing to give this a try!

Answer 1

在Bootstrap 2.x.x中，该行具有负左边距，而span-x具有左边距以获得装订线。如果第二个跨度堆叠到下一行，它肯定会留下余量。

我的建议是仅从http://getbootstrap.com/customize/下载网格并附加到现有的bootstrap css或自定义css中。使用新的网格系统来获得你想要的东西。

Answer 2

实现这一目标而不改变bootstrap 2.3 css的一种方法是

<div class='row'> 
    <div class='span6 hidden-desktop visible-tablet visible-phone'>YY</div>
    <div class='span3'>X</div>
    <div class='span6 visible-desktop hidden-tablet hidden-phone'>YY</div>
    <div class='span3'>Z</div>
</div>

请参阅http://jsfiddle.net/houssamk/3f969/2/

Bootstrap 3.x像Bootstrap 2.3中的Grid Column Ordering

2 个答案: