父节点的引导按钮组全宽 - 不等于宽度按钮

Question

我想要一个Bootstrap btn-group来获取其父级的全宽，但我不希望按钮的宽度相等。

我希望所有按钮只占用他们需要的宽度，除了一个占据剩余宽度的按钮。

示例：

------------------ width of parent -----------------
| btn 1                            | btn 2 | btn 3 |

或

------------------ width of parent -----------------
| btn 1 | btn 2 | btn 3                            |

Answer 1

您好，请检查此jsfiddle并告诉我您是否愿意。

HTML：

<div class="parent">
  <div class="btn-group child">
    <button type="button" class="btn btn-primary larger">Apple</button>
    <button type="button" class="btn btn-primary normal">Samsung</button>
    <button type="button" class="btn btn-primary normal">Sony</button>
  </div>
</div>

CSS：

.parent{
  width:600px;
}

.child{
  width:100%;
}

.larger{
 width:60%; 
}

.normal{
 width:20%; 
}