html - 按钮网格，它们之间的间距很小

Question

我想创建一个像这样的按钮网格:

看完这个问题How to set up a grid of buttons in bootstrap?我在 css 文件中添加了这个:

#channels button {
   float: left;
   width: auto;
}

html 文件中的这些按钮:

  <div id="channels" className="span12">
    <div className="btn-group">
      <button type="button" className="btn btn-default" id="channel">
        A
      </button>

      <button type="button" className="btn btn-default" id="channel">
        B
      </button>
    </div>
  </div>

但是，我没有得到任何间距:

那么如何创建这样的网格呢？

Answer 1

给每个按钮留出边距，这将把它隔开。 Twitter Bootstrap 的按钮默认边距为 0，这就是目前没有间距的原因。

附言您不应该有两个具有相同 ID 的元素。

.channel{
  margin:10px;  
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div id="channels" className="span12">
    <div className="btn-group">
      <button type="button" className="btn btn-default" class="channel">
        A
      </button>

      <button type="button" className="btn btn-default" class="channel">
        B
      </button>
    </div>
  </div>