css - Bootstrap 按钮和列扩展整个 div 标签的宽度

Question

我正在尝试使用 Bootstrap 提供的研磨系统构建一个 bootstrap 计算器。我有两行使用 col-md-4 类，每行包含 4 个按钮。我希望看到按钮扩展整个 div 标签的宽度。当我将背景颜色添加到 div 标签时，颜色会填充整个 div 标签，但我会异常(exception)。我创建了一个代码笔来说明我的问题。

<div class="container">
<div class="cal-body">
<div class="header">
</div>  
<div class="lcd"> 
</div>
<div class="row">
  <div class="col-md-4">
   <button>7</button>
   <button>8</button>
   <button>9</button>
   <button>%</button>
  </div>
 </div>
<div class="row">
  <div  class="col-md-4" style="margin-bottom: 20px;">
   <button>4</button>
   <button>5</button>
   <button>6</button>
    <button>X</button>
  </div>
  </div>   
  </div>
</div>
</div> 

换句话说，我希望我的按钮占据列行的整个长度。截至目前，它只占用了列空间的 1/4。我正在尝试复制计算器的外观。我的码笔:http://codepen.io/louis345/pen/KNoypX

任何帮助将不胜感激。

Answer 1

如果您想跨越整行，只需将 col-md-4 更改为 col-md-12。您还可以将类 text-center 添加到您的列中以使按钮居中。

示例:

<div class="col-md-12 text-center">

</div