Question

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

<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

Answer 2

检查this，看看这是否是您要找的内容

我们的想法是将每个按钮包装在不同的列上

<div class="col col-sm-3">
  <button>7</button>
</div>

Answer 3

@claudios你的答案是对的[使用课程（ text-center ）]，我只是在这个片段中实现。

.line{
  box-shadow:inset 0px 0px 2px #ccc;
  padding-top: 10px;
  padding-bottom: 10px;
 }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<br>

<div class="container">
  <div class="row">
     <div class="col-sm-12 text-center line">
       <button class="btn btn-success">Submit</button>
       <button class="btn btn-default">Cancel</button>
     </div>
  </div>
</div>

Answer 4

每行有12列，你设置div使用4列，它会使div使用1/3的大小。此外，col-md必须用于尺寸> = 768px。你应该使用col-xs，因为你限制了身体的大小。

我根据你的代码笔http://codepen.io/anon/pen/BQMeXQ

制作了它

看看这里，2行，每行有4个div，每个使用3列。

<style>
  .button-group {
    width: 100%;
    margin-left: 15px;
  }
  .button-line {
    width: 100%;
  }
  .button-col {
    padding-left: 0px;
    padding-right: 0px;
  }
  .button-col button{
   width: 100%;
 }
</style>

<div class="button-group">
  <div class="row button-line">
    <div class="col-xs-3 button-col">
      <button>7</button>
    </div>
    <div class="col-xs-3 button-col">
      <button>8</button>
    </div>
    <div class="col-xs-3 button-col">
      <button>9</button>
    </div>
    <div class="col-xs-3 button-col">
      <button>%</button>
    </div>
  </div>

  <div class="row button-line">
    <div class="col-xs-3 button-col">
      <button>4</button>
    </div>
    <div class="col-xs-3 button-col">
      <button>5</button>
    </div>
    <div class="col-xs-3 button-col">
      <button>6</button>
    </div>
    <div class="col-xs-3 button-col">
      <button>x</button>
    </div>
  </div>
</div>

引导按钮和列扩展div标签的整个宽度

4 个答案: