В Bootstrap 2.3.2, как я могу изменить номер диапазона div при изменении размера окна?

Я использую YiiStrap, расширение Yii, которое в настоящее время поставляется с twitter bootstrap 2.3.2.

У меня есть два элемента в одной строке, каждый из которых является span6.

<div class="row-fluid">
  <div class="span6">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tristique dolor, ut vehicula mi. Donec nec dui a nisl tincidunt suscipit. Pellentesque venenatis libero ac augue suscipit, vitae tristique arcu posuere.
  </div>

  <div class="span6 visible-desktop">
    <img src="large_photo.jpg" />
  </div>
</div>

Это отлично работает для размера рабочего стола, но как только я уменьшу окно до размера телефона, я хотел бы удалить второй элемент, используя класс .visible-desktop.

Теперь у меня остался только один элемент, у которого все еще есть span6, но я бы хотел, чтобы он был в span12. Могу ли я каким-либо образом указать, чтобы он менял оставшийся элемент на span12, когда мы не на рабочем столе? Я знаю, что это возможно в Bootstrap 3, но, к сожалению, я застрял на 2.3.2, если хочу использовать YiiStrap.


css twitter-bootstrap twitter-bootstrap-2 yii-extensions
person zeckdude    schedule 14.01.2014    source источник
comment
При разрешении 767px span6 должен автоматически расширяться и вести себя как span12, если включен файл bootstrap.responsive.css. Вы хотите, чтобы он расширялся до 767 пикселей?   -  person Schmalzy    schedule 14.01.2014

Ответы (1)


arrow_upward
1
arrow_downward

вы можете сделать это с помощью jQuery, я не знаю точного синтаксиса, но я знаю, что вы можете использовать .toggleClass() для переключения между span6 - span12 и width(), =< для проверки ширины элемента, всего ширины в предложении if{}. Я новичок в jQuery, поэтому больше ничего не могу сказать, надеюсь, это будет полезно.

http://api.jquery.com/?s=width

http://api.jquery.com/toggleClass/

person Kunoxs    schedule 14.01.2014