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|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|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|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|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|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|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|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>


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|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>


<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-button"></i>          Add to list        <

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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