有没有办法让按钮组在引导程序中具有网格系统属性？

Question

我在我的应用中使用bootstrap 3并在我的应用中使用按钮组组件。 按钮组有6个按钮，我使用btn-group-justified来使宽度变满。这是代码

<div class='btn-group btn-group-justified' role='group' aria-label='slot'>
  <div class='btn-group btn-group-xs' role='group'>
    <button type='submit' class='btn btn-default' value='1' name='menit'>00</button>
  </div>
  <div class='btn-group btn-group-xs' role='group'>
    <button type='submit' class='btn btn-default' value='2' name='menit'>10</button>
  </div>
  <div class='btn-group btn-group-xs' role='group'>";
    <button type='submit' class='btn btn-default' value='3' name='menit'>20</button>
  </div>
...

这里是示例图片

我想要实现的是，有没有办法让按钮组有一个像使用bootstrap一样的属性的网格系统？假设我要删除10号按钮并使按钮00跨度更宽到按钮10位置。就像在bootstrap中使用网格系统一样。问题是按钮对齐使所有按钮具有相同的宽度。我也对CSS解决方案持开放态度。

Answer 1

您可以在以下代码段中定义宽度。您必须调整百分比以满足您的特定需求。

.btn-group-justified .btn.weight-1{
    width: 25%;
}

.btn-group-justified .btn.weight-2{
    width: 50%;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="btn-group btn-group-justified">
  <a href="#" class="btn btn-primary weight-2">Apple</a>
  <a href="#" class="btn btn-primary weight-1">Samsung</a>
  <a href="#" class="btn btn-primary weight-1">Sony</a>
</div>