Question

我在Bootstrap按钮工具栏中有许多按钮，它们会突破到新行。这没关系，但这些行之间没有间距，如何在不事先明确创建新行的情况下添加它？

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="btn-toolbar" role="toolbar">
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
          <button class="btn btn-default" type="submit">Button</button>
      </div>
    </div>
  </div>
</div>

Answer 1

添加自定义css：

.btn{
  margin:3px !important;
}

Answer 2

我可能会添加一些bootstrap自定义：

.btn-toolbar .btn-default {
  margin-top: 3px;
}

Answer 3

.btn-toolbar>.btn{
    margin-bottom: 5px;
}

上面的代码会在所有按钮周围产生相等的间距。如果有任何问题，请告诉我。

即使您创建了一个由所有按钮组成的整行，然后根据您的布局，您可以增加边距底部，以便为您的布局创建足够的空间。

在Bootstrap按钮行之间添加间距

3 个答案: