blocks|key|535929|text|将它们放在btn-toolbar或其他容器中，而不是btn-group中。btn-group将它们结合在一起。有关Bootstrap+documentation的详细信息。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|535930|编辑:最初的问题是针对Bootstrap+2.x的，但同样的问题也适用于Bootstrap+3和Bootstrap+4。|535931|在Bootstrap+4中，您需要使用实用程序类(如mx-2+)将适当的边距添加到组中。|535932|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/2.3.2/components.html#buttonGroups|1|https://getbootstrap.com/docs/3.3/components/#btn-groups|2|https://getbootstrap.com/docs/4.0/components/button-group/|3^0|5|B|Q|9|11|9|1V|D|0|0|10|B|1|1C|B|2|0|1|B|3|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]|$9|1A|A|1B|1|1C]]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|J|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]|V|$5|M|N|O|E|$P|U]]]]

<p>Put them inside <code>btn-toolbar</code> or some other container, not <code>btn-group</code>. <code>btn-group</code> joins them together. More info on Bootstrap <a href="http://getbootstrap.com/2.3.2/components.html#buttonGroups" rel="noreferrer">documentation</a>.</p>

<p>Edit: The original question was for Bootstrap 2.x, but the same is still valid for <a href="https://getbootstrap.com/docs/3.3/components/#btn-groups" rel="noreferrer">Bootstrap 3</a> and <a href="https://getbootstrap.com/docs/4.0/components/button-group/" rel="noreferrer">Bootstrap 4</a>.</p>

<p>In <a href="https://getbootstrap.com/docs/4.0/components/button-group/" rel="noreferrer">Bootstrap 4</a> you will need to add appropriate margin to your groups using utility classes, such as mx-2.</p>


blocks|key|535964|text|我实际上遇到了同样的要求。我简单地使用了CSS覆盖，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|535965|.navbar+.btn-toolbar+{+margin-top:+0;+margin-bottom:+0+}|code-block|syntax|javascript|535966|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I actual ran into the same requirement. I simply used CSS override like this</p>

<pre><code>.navbar .btn-toolbar { margin-top: 0; margin-bottom: 0 }
</code></pre>


blocks|key|536024|text|在大多数情况下，最简单的方法是保证金。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|536025|您可以执行以下操作：|536026|button{
++margin:+13px+12px+12px+10px;
}|code-block|syntax|javascript|536027|或|536028|button{
++margin:+13px;
}|536029|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>The easiest way in most situations is margin.</p>

<p>Where you can do :</p>

<pre><code>button{
  margin: 13px 12px 12px 10px;
}
</code></pre>

<p>OR</p>

<pre><code>button{
  margin: 13px;
}
</code></pre>


blocks|key|536063|text|只需将按钮放在一个类中(工具栏“btn-class=”)，就像Miroslav兄弟所说的那样，Popovic.It的效果非常棒。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|536064|​|536065|<div+class="btn-toolbar">
++<button+type="button"+id="btnSubmit"+class="btn+btn-primary+btn-sm">Submit</button>
++<button+type="button"+id="btnCancel"+class="btn+btn-primary+btn-sm">Cancel</button>
</div>|code-block|syntax|javascript|536066|536067|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Just put the buttons in a class ( class="btn-toolbar" ) as told by bro Miroslav Popovic.It works awesome.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="btn-toolbar"&gt;
  &lt;button type="button" id="btnSubmit" class="btn btn-primary btn-sm"&gt;Submit&lt;/button&gt;
  &lt;button type="button" id="btnCancel" class="btn btn-primary btn-sm"&gt;Cancel&lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|319247|text|你可以使用spacing+for+Bootstrap，不需要任何额外的CSS。只需将类添加到按钮即可。这是针对版本4的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|319248|entityMap|0|LINK|mutability|MUTABLE|url|https://v4-alpha.getbootstrap.com/utilities/spacing/^0|5|L|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>You can use <a href="https://v4-alpha.getbootstrap.com/utilities/spacing/" rel="noreferrer">spacing for Bootstrap</a> and no need for any additional CSS. Just add the classes to your buttons. This is for version 4.</p>


blocks|key|319281|text|您应该使用bootstrap+v.4|type|unstyled|depth|inlineStyleRanges|entityRanges|data|319282|<div+class="form-group+row">
++++<div+class="col-md-6">
++++++++<input+type="button"+class="btn+form-control"+id="btn1">
++++</div>
++++<div+class="col-md-6">
++++++++<input+type="button"+class="btn+form-control"+id="btn2">
++++</div>
</div>|code-block|syntax|javascript|319283|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>you should use bootstrap v.4</p>

<pre><code>&lt;div class="form-group row"&gt;
    &lt;div class="col-md-6"&gt;
        &lt;input type="button" class="btn form-control" id="btn1"&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
        &lt;input type="button" class="btn form-control" id="btn2"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|319312|text|另一种方法是在按钮中添加一个.btn-space类|type|unstyled|depth|inlineStyleRanges|entityRanges|data|319313|++<button+type="button"+class="btn+btn-outline-danger+btn-space"
++</button>
++<button+type="button"+class="btn+btn-outline-primary+btn-space"
++</button>|code-block|syntax|javascript|319314|并按如下方式定义这个类|319315|.btn-space+{
++++margin-right:+15px;
}|319316|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Another way to achieve this is to add a class .btn-space in your buttons</p>

<pre><code>  &lt;button type="button" class="btn btn-outline-danger btn-space"
  &lt;/button&gt;
  &lt;button type="button" class="btn btn-outline-primary btn-space"
  &lt;/button&gt;
</code></pre>

<p>and define this class as follows</p>

<pre><code>.btn-space {
    margin-right: 15px;
}
</code></pre>


blocks|key|319347|text|Dragan+B建议的是Bootstrap+4的正确方法。我在下面放了一个例子。例如，mr-3是右边缘的:1+1rem！重要|type|unstyled|depth|inlineStyleRanges|entityRanges|data|319348|<div+class="btn-toolbar+pull-right">
+++<button+type="button"+class="btn+mr-3">btn1</button>
+++<button+type="button"+class="btn+mr-3">btn2</button>
+++<button+type="button"+class="btn">btn3</button>
</div>|code-block|syntax|javascript|319349|附注:在我的例子中，我希望我的按钮显示在屏幕的右侧，因此向右拉。|319350|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>What Dragan B suggested is right way to go for Bootstrap 4. I have put one example below. e.g. mr-3 is margin-right:1rem!important</p>

<pre><code>&lt;div class="btn-toolbar pull-right"&gt;
   &lt;button type="button" class="btn mr-3"&gt;btn1&lt;/button&gt;
   &lt;button type="button" class="btn mr-3"&gt;btn2&lt;/button&gt;
   &lt;button type="button" class="btn"&gt;btn3&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>p.s: in my case I wanted my buttons to be displayed to the right of the screen and hence pull-right. </p>


blocks|key|536258|text|我最终做了一些与mark+dibe类似的事情，但我需要以一种稍微不同的方式来计算间距。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|536259|bootstrap中的col-x类绝对是救命稻草。我最终做了类似的事情：|style|CODE|536260|<div+class="row+col-12">
++++<div+class="col-3">Title</div>
</div>
<div+class="row+col-12">
++++<div+class="col-3">Bootstrap+Switch</div>
<div>|code-block|syntax|javascript|536261|这使我能够以一种很好的间隔方式对齐标题和输入开关。同样的想法也可以应用于按钮，并允许您停止按钮接触。|536262|(附注:我希望这是对上面链接的评论，但我的声誉还不够高)|536263|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/48733473/5395858^0|8|9|0|0|B|5|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@$A|13|B|14|F|G]]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|16|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|17|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

<p>I ended up doing something similar to what <a href="https://stackoverflow.com/a/48733473/5395858">mark dibe</a> did, but I needed to figure out the spacing for a slightly different manner.</p>

<p>The <code>col-x</code> classes in bootstrap can be an absolute lifesaver. I ended up doing something similar to this:</p>

<pre><code>&lt;div class="row col-12"&gt;
    &lt;div class="col-3"&gt;Title&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row col-12"&gt;
    &lt;div class="col-3"&gt;Bootstrap Switch&lt;/div&gt;
&lt;div&gt;
</code></pre>

<p>This allowed me to align titles and input switches in a nicely spaced manner. The same idea can be applied to the buttons and allow you to stop the buttons from touching.</p>

<p>(Side note: I wanted this to be a comment on the above link, but my reputation is not high enough)</p>


blocks|key|536343|text|Dragan+B.解决方案是正确的。在我的例子中，我需要在堆叠时垂直间隔按钮，所以我给它们添加了mb-2属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|536344|<div+class="btn-toolbar">
+++<button+type="button"+class="btn+btn-primary+mr-2+mb-2">First</button>
+++<button+type="button"+class="btn+btn-primary+mr-2+mb-2">Second</button>
+++<button+type="button"+class="btn+btn-primary+mr-2+mb-2">Third</button>
</div>|code-block|syntax|javascript|536345|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Dragan B. solution is correct. In my case I needed the buttons to be spaced vertically when stacking so I added the mb-2 property to them.</p>
<pre><code>&lt;div class=&quot;btn-toolbar&quot;&gt;
   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary mr-2 mb-2&quot;&gt;First&lt;/button&gt;
   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary mr-2 mb-2&quot;&gt;Second&lt;/button&gt;
   &lt;button type=&quot;button&quot; class=&quot;btn btn-primary mr-2 mb-2&quot;&gt;Third&lt;/button&gt;
&lt;/div&gt;
</code></pre>


blocks|key|536407|text|这是另一种基于documentation的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|536408|+<div+class="d-grid+gap-2+d-md-flex"+>
++++<button+type="button"+class="btn+btn-outline-primary+btn-sm">button1</button>
++++<button+type="button"+class="btn+btn-outline-primary+btn-sm">button2</button>
+</div>|code-block|syntax|javascript|536409|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/5.0/components/buttons/#block-buttons^0|7|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Here's another approach based on the <a href="https://getbootstrap.com/docs/5.0/components/buttons/#block-buttons" rel="nofollow noreferrer">documentation</a>.</p>
<pre><code> &lt;div class=&quot;d-grid gap-2 d-md-flex&quot; &gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary btn-sm&quot;&gt;button1&lt;/button&gt;
    &lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary btn-sm&quot;&gt;button2&lt;/button&gt;
 &lt;/div&gt;
</code></pre>


<p>What is the best way to horizontally space Bootstrap buttons?</p>

<p>At the moment the buttons are touching:</p>

<pre><code>&lt;div class="btn-group"&gt;
    &lt;button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"&gt;
        &lt;i class="icon-in-button"&gt;&lt;/i&gt;  
        Add to list
        &lt;span class="caret"/&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;
            &lt;a href="#"&gt;here&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
            &lt;a href="#"&gt;new&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    &lt;button class="btn btn-info"&gt;
        &lt;i class="icon-in-button"&gt;&lt;/i&gt;  
        more
    &lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/1B3mT.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1B3mT.png" alt="Two Bootstrap buttons"></a> </p>

<p>jsfiddle showing the problem: <a href="http://jsfiddle.net/hhimanshu/sYLRq/4/" rel="noreferrer">http://jsfiddle.net/hhimanshu/sYLRq/4/</a></p>


How can I make space between two buttons in same div?

容器

水平放置Bootstrap按钮的最佳方式是什么？在按钮接触的那一刻：<div class="btn-group">    <button class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">        <i class="icon-in-bu...

问如何在同一个div中的两个按钮之间留出空格？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在同一个div中的两个按钮之间留出空格？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在同一个div中的两个按钮之间留出空格？
EN