Bootstrap - 按钮工具栏宽度 100% - 使用 btn-group答案

【问题标题】：Bootstrap - Button toolbar width 100% - using btn-group'sBootstrap - 按钮工具栏宽度 100% - 使用 btn-group
【发布时间】：2014-12-12 18:22:04
【问题描述】：

当我使用 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%" 不起作用。有什么建议？还是替代品？

谢谢你。

【问题讨论】：

请向我们展示您的代码。
代码已添加
Bootstrap 3 btn-group width的可能重复
@Feeco no：已经尝试过该问题的解决方案，这里的问题是btn-toolbar 而不是btn-group

标签： html css twitter-bootstrap-3

【解决方案1】：

我认为解决方案是在层次结构中添加一个额外的 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>

【讨论】：

【解决方案2】：

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

<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>

【讨论】：