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，这就是目前没有间距的原因。

P.S。您不应该有两个具有相同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>

Answer 2

这是因为您没有使用ROWS和Cols of bootstrap。

使用行和列，您可以确定所需的列数，并将它们提供给12行。像：

    <div class="row">
        <div class="col-lg-6">
              <button type="button" className="btn btn-default" id="channel">
                A
              </button>
        </div>

        <div class="col-lg-6">
          <button type="button" className="btn btn-default" id="channel">
            B
          </button>
        </div>
    </div>

这会给你两个分开的按钮，因为你在一个按钮中有6个cols，在其他按钮中有6个cols。如果你想要像图像这样的东西，你必须：

<div>
    <div class="row">
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                SAFE
              </button>
        </div>
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                FUN 
              </button>
        </div>
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                FRIENDLY
              </button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                SNOW
              </button>
        </div>
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                BEACH 
              </button>
        </div>
        <div class="col-lg-4">
              <button type="button" className="btn btn-default" id="channel">
                SURFING
              </button>
        </div>
    </div>
</div>

正如您所看到的，我们分发了带有4列的对等行3列，因为网格系统上有4 * 3 = 12列。 Bootstrap包括一个响应式移动第一流体网格系统，随着设备或视口大小的增加，可以适当地扩展到12列。它包括用于简单布局选项的预定义类，以及用于生成更多语义布局的强大混合。

有关它的更多信息，请访问http://getbootstrap.com/css/#grid了解Bootstrap的GRID。

按钮网格，它们之间有小间距

2 个答案: