Bootstrap - 按钮工具栏宽度100％ - 使用btn-group＆＃39; s

Question

当我使用 btn-group 时，让我从左到右填充100％的引导工具栏时遇到一些问题

我尝试过使用： btn-group-justified

Example without btn-group-justified

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left 1</button>
    <button type="button" class="btn btn-default">Left 2</button>
    <button type="button" class="btn btn-default">Left 3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle 1</button>
    <button type="button" class="btn btn-default">Middle 2</button>
    <button type="button" class="btn btn-default">Middle 3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right 1</button>
    <button type="button" class="btn btn-default">Right 2</button>
    <button type="button" class="btn btn-default">Right 3</button>
  </div>
</div>

Example with btn-group-justified

<div class="btn-toolbar btn-group-justified" role="toolbar">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left 1</button>
    <button type="button" class="btn btn-default">Left 2</button>
    <button type="button" class="btn btn-default">Left 3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle 1</button>
    <button type="button" class="btn btn-default">Middle 2</button>
    <button type="button" class="btn btn-default">Middle 3</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right 1</button>
    <button type="button" class="btn btn-default">Right 2</button>
    <button type="button" class="btn btn-default">Right 3</button>
  </div>
</div>

并且函数：width =“100％”不起作用。有什么建议？还是替代品？

谢谢你。

Answer 1

使用btn-block class和col-xx-yy class：

<div class="btn-group btn-block">
    <button class="btn btn-default col-lg-4" type="button">Left 1</button>
    <button class="btn btn-default col-lg-4" type="button">Left 2</button>
    <button class="btn btn-default col-lg-4" type="button">Left 3</button>
</div>

Answer 2

我认为解决方案是在层次结构中添加一个额外的btn-group div并使用btn-group-justified，即

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group btn-group-justified">
    <div class="btn-group">
      <button class="btn btn-default" type="button">Left 1</button>
      <button class="btn btn-default" type="button">Left 2</button>
      <button class="btn btn-default" type="button">Left 3</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-default" type="button">Middle 1</button>
      <button class="btn btn-default" type="button">Middle 2</button>
      <button class="btn btn-default" type="button">Middle 3</button>
    </div>
    <div class="btn-group">
      <button class="btn btn-default" type="button">Right 1</button>
      <button class="btn btn-default" type="button">Right 2</button>
      <button class="btn btn-default" type="button">Right 3</button>
    </div>
  </div>
</div>