Question

如何使用bootstrap4 ONLY类更改btn-group的垂直/水平方向，我找不到任何btn-group-vertical-xs，-md，-lg类。

<div class="btn-group-vertical">
  ...
</div>

Answer 1

由于btn-group现在是display: flexbox，您可以使用flex-column类使其垂直...

<div class="btn-group flex-column" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

http://codeply.com/go/Y3BVq9I49h

Answer 2

使用纯引导程序，您可以创建一个水平组和一个垂直组，并使用display classes在它们之间切换：

def tv_show(people_list)
  tv_friends = people_list.each_with_object(Hash.new({})) do |person, hash|
    tv_show = person[:favourites][:tv_show]
    name    = person[:name]

    hash.key?(tv_show) ? hash[tv_show] << name : hash[tv_show] = [name]
  end
  tv_friends.values.select { |value| value.length > 1 }.first
end

请注意，Bootstrap 4 Beta中不再存在<div class="btn-group d-none d-sm-block"> <button class="btn">Button 1</button> <button class="btn">Button 2</button> </div> <div class="btn-group-vertical d-block d-sm-none"> <button class="btn">Button 1</button> <button class="btn">Button 2</button> </div>和hidden-*类。有关转换表，请参阅this其他答案。

使用BS4类更改按钮组方向垂直/水平

2 个答案: