Twitter Bootstrap 3 - как я могу переключиться с горизонтальной группы кнопок на вертикальную группу кнопок в зависимости от размера экрана?

Ответ 1

Использование jquery для определения размера окна и адаптации класса меню соответственно:

<div class="btn-group" id="responsive">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

<script>
$(window).resize(function() {
  if ($(window).width() < 408) {
    $('#responsive').removeClass('btn-group');
    $('#responsive').addClass('btn-group-vertical');
  } else {
    $('#responsive').addClass('btn-group');
    $('#responsive').removeClass('btn-group-vertical');
  }
});
</script>

С чистым бутстрапом вы создадите два меню: горизонтальное и вертикальное:

<div class="btn-group hidden-xs">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

<div class="btn-group-vertical visible-xs">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>

В идеальном мире вы будете делать это, используя только медиа-запросы в css, но добавление пользовательских запросов к бутстрапу может быть немного сложнее.

Ответ 2

Если вы используете метод чистого бутстрапа, предложенный Duvrai, и используете Razor в ASP.NET, вы можете избежать буквального дублирования кода, создав @helper, который можно использовать повторно. Таким образом, приведенный пример станет

@helper ReusedBlock(string clazz){
<div class="@clazz">
  <button class="btn">Hello</button>
  <button class="btn">World</button>
</div>
}

а затем он будет использоваться просто так:

@ReusedBlock("btn-group hidden-xs")
@ReusedBlock("btn-group-vertical visible-xs")

Это особенно полезно, если повторно используемый блок является сложным и делает код более понятным и удобным для понимания и обслуживания.

Примечание. вы можете передать любое количество аргументов определенному помощнику, вам просто нужно включить их в его определение.