blocks|key|613975|text|向父级添加text-center对我来说很有效(Bootstrap+3)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|613976|<div+class="text-center">
+++<div+class="btn-group">
++++++<a+href=1+class="btn+btn-small">1</a>
++++++<a+href=1+class="btn+btn-small">2</a>
++++++<a+href=1+class="btn+btn-small">3</a>
+++</div>
</div>|code-block|syntax|javascript|613977|entityMap^0|5|B|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Adding <code>text-center</code> to a parent works for me (Bootstrap 3):</p>
<pre><code>&lt;div class=&quot;text-center&quot;&gt;
   &lt;div class=&quot;btn-group&quot;&gt;
      &lt;a href=1 class=&quot;btn btn-small&quot;&gt;1&lt;/a&gt;
      &lt;a href=1 class=&quot;btn btn-small&quot;&gt;2&lt;/a&gt;
      &lt;a href=1 class=&quot;btn btn-small&quot;&gt;3&lt;/a&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|397885|text|或者添加“以分页为中心”，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|397886|<div+class="btn-toolbar+pagination-centered">
++<div+class="btn-group">
++++<a+href=1+class="btn+btn-small">1</a>
++++<a+href=1+class="btn+btn-small">2</a>
++++<a+href=1+class="btn+btn-small">3</a>
++</div>
</div>|code-block|syntax|javascript|397887|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>or add "pagination-centered", example:</p>

<pre><code>&lt;div class="btn-toolbar pagination-centered"&gt;
  &lt;div class="btn-group"&gt;
    &lt;a href=1 class="btn btn-small"&gt;1&lt;/a&gt;
    &lt;a href=1 class="btn btn-small"&gt;2&lt;/a&gt;
    &lt;a href=1 class="btn btn-small"&gt;3&lt;/a&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|398148|text|对于引导程序4|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398149|<div+class="text-center">
++++<div+class="btn-group">
++++++++<a+href="#"+class="btn+btn-primary">text+1</a>
++++++++<a+href="#"+class="btn+btn-outline-primary">text+2</a>
++++</div>
</div>|code-block|syntax|javascript|398150|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>for bootstrap 4</p>

<pre><code>&lt;div class="text-center"&gt;
    &lt;div class="btn-group"&gt;
        &lt;a href="#" class="btn btn-primary"&gt;text 1&lt;/a&gt;
        &lt;a href="#" class="btn btn-outline-primary"&gt;text 2&lt;/a&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>


blocks|key|397853|text|只需将您的按钮链接声明为inline-block而不是float:left，您的text-align:center声明就会工作，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|397854|.btn-group+a+{
++++display:inline-block;
}|code-block|syntax|javascript|397855|演示：http://jsfiddle.net/EVmwe/3/|397856|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/EVmwe/3/^0|C|C|R|A|14|H|0|0|3|S|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|D|@$9|13|A|14|1|15]]|E|$]]|$1|M|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>Just declare your button links as <code>inline-block</code> instead of <code>float:left</code> and your <code>text-align:center</code> declaration will work, like so:</p>

<pre><code>.btn-group a {
    display:inline-block;
}
</code></pre>

<p>Demo: <a href="http://jsfiddle.net/EVmwe/3/">http://jsfiddle.net/EVmwe/3/</a></p>


blocks|key|613940|text|自Twitter+Bootstrap+3以来，不需要任何变通方法。只需指定父元素的text-align:+center即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|613941|entityMap^0|15|I|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Since Twitter Bootstrap 3 there is no need for any workaround. Just specify the <code>text-align: center</code> for the parent element.</p>


blocks|key|397993|text|如果有人还想更改.btn-group的宽度，您可以使用min-width而不是width。我这样做了：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|397994|HTML：|397995|<div+class="text-center">
<div+class="btn-group">
++++<button+class="btn">1</button>
++++<button+class="btn">2</button>
</div>
</div>|code-block|syntax|javascript|397996|CSS：|397997|.btn-group+{min-width:+90%25;}
.btn+{width:+50%25;}|397998|这将btn组宽度设置为文本中心的90%25，每个包含的按钮是按钮组的50%25+(文本中心div的45%25)。|397999|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>In case anyone also wants to change the width of the .btn-group, you can do min-width rather than width.  I did this:</p>

<p>HTML:</p>

<pre><code>&lt;div class="text-center"&gt;
&lt;div class="btn-group"&gt;
    &lt;button class="btn"&gt;1&lt;/button&gt;
    &lt;button class="btn"&gt;2&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.btn-group {min-width: 90%;}
.btn {width: 50%;}
</code></pre>

<p>That set the btn-group width to 90% of text-center and each included button is 50% of the button group (45% of the text-center div).</p>


blocks|key|398044|text|在Bootstrap+3中，您只需要像下面的更改一样简单地构造|type|unstyled|depth|inlineStyleRanges|entityRanges|data|398045|++++<div+class="btn-toolbar">
++++++++<div+class="btn-group">
++++++++++++<button+onclick="#"+type="button"+class="btn+btn-default+btn-sm">
++++++++++++++++Click+1+++++++++++++++++++++++++++++++++++++
++++++++++++</button>+++++++++++
++++++++++++<button+onclick="#"+type="button"+class="btn+btn-default+btn-sm">
++++++++++++++++Click+2
++++++++++++</button>
++++++++++++<button+onclick="#"+class="btn+btn-default+btn-sm"+type="button">+++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++Click+3
++++++++++++</button>
++++++++++++<button+onclick="#"+type="button"+class="btn+btn-default+btn-sm">
++++++++++++++++Click+4
++++++++++++</button>
++++++++++++<button+onclick="#"+type="button"+class="btn+btn-default+btn-sm">
++++++++++++++++Click+5
++++++++++++</button>
++++++++++++<button+onclick="#"+type="button"+class="btn+btn-default+btn-sm">
++++++++++++++++Click+6
++++++++++++</button>
++++++++</div>
++++</div|code-block|syntax|javascript|398046|并修改样式仅此(覆盖bootstrap)，强制向左浮动，这样您就不能强制使用边距或文本中心：|398047|.btn-toolbar+.btn-group+{float:initial;}|398048|这对我来说很有效，不需要太多的改变。|398049|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>In Bootstrap 3, you just need to structure as simple as following change</p>

<pre><code>    &lt;div class="btn-toolbar"&gt;
        &lt;div class="btn-group"&gt;
            &lt;button onclick="#" type="button" class="btn btn-default btn-sm"&gt;
                Click 1                                     
            &lt;/button&gt;           
            &lt;button onclick="#" type="button" class="btn btn-default btn-sm"&gt;
                Click 2
            &lt;/button&gt;
            &lt;button onclick="#" class="btn btn-default btn-sm" type="button"&gt;                                               
                Click 3
            &lt;/button&gt;
            &lt;button onclick="#" type="button" class="btn btn-default btn-sm"&gt;
                Click 4
            &lt;/button&gt;
            &lt;button onclick="#" type="button" class="btn btn-default btn-sm"&gt;
                Click 5
            &lt;/button&gt;
            &lt;button onclick="#" type="button" class="btn btn-default btn-sm"&gt;
                Click 6
            &lt;/button&gt;
        &lt;/div&gt;
    &lt;/div
</code></pre>

<p>And amend the style only this (override the bootstrap) which force float left so that you cannot force by margin or text center:</p>

<pre><code>.btn-toolbar .btn-group {float:initial;}
</code></pre>

<p>This works for me, without much change.</p>


blocks|key|614101|text|我正在使用以下解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|614102|<div+class="center-block"+style="max-width:400px">
++<a+href="#"+class="btn+btn-success">Accept</a>
++<a+href="#"+class="btn+btn-danger">+Reject</a>
</div>|code-block|syntax|javascript|614103|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 am using the following solution. <br/></p>

<pre><code>&lt;div class="center-block" style="max-width:400px"&gt;
  &lt;a href="#" class="btn btn-success"&gt;Accept&lt;/a&gt;
  &lt;a href="#" class="btn btn-danger"&gt; Reject&lt;/a&gt;
&lt;/div&gt;
</code></pre>


blocks|key|398183|text|<div+class="btn-group+mx-auto"+role="group">
++++<a+href="#"+class="btn+btn-outline-primary">+Button+1</a>
++++<a+href="#"+class="btn+btn-outline-primary">+Button+2</a>
</div>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|398184|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;div class="btn-group mx-auto" role="group"&gt;
    &lt;a href="#" class="btn btn-outline-primary"&gt; Button 1&lt;/a&gt;
    &lt;a href="#" class="btn btn-outline-primary"&gt; Button 2&lt;/a&gt;
&lt;/div&gt;
</code></pre>


blocks|key|614120|text|在p标记中抛出btn-group，并对p+{}使用text-align:center+style|type|unstyled|depth|inlineStyleRanges|entityRanges|data|614121|++++p+{
++++text-align:+center;
++++}

++++<p>
++++<div+class="btn-group"+role="group"+aria-label="...">
++++<button+type="button"+class="btn+btn-default">Left</button>
++++<button+type="button"+class="btn+btn-default">Middle</button>
++++<button+type="button"+class="btn+btn-default">Right</button>
++++</div>
++++</p>|code-block|syntax|javascript|614122|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>Throw the btn-group in a p tag and use text-align:center style for p {}</p>

<pre><code>    p {
    text-align: center;
    }

    &lt;p&gt;
    &lt;div class="btn-group" role="group" aria-label="..."&gt;
    &lt;button type="button" class="btn btn-default"&gt;Left&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;Middle&lt;/button&gt;
    &lt;button type="button" class="btn btn-default"&gt;Right&lt;/button&gt;
    &lt;/div&gt;
    &lt;/p&gt;
</code></pre>


blocks|key|614150|text|这在Bootstrap+v3.3中帮了我很大的忙|type|unstyled|depth|inlineStyleRanges|entityRanges|data|614151|.btn-group+{
++margin:+auto;
++display:+flex;
++flex-direction:+row;
++justify-content:+center;
}|code-block|syntax|javascript|614152|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>This did the trick for me in Bootstrap v3.3</p>

<pre><code>.btn-group {
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</code></pre>


<p>I'm using <a href="http://twitter.github.com/bootstrap/">twitter-bootstrap</a>, and i found it fairly hard to center <code>div</code> which has class <code>.btn-group</code> (<a href="http://twitter.github.com/bootstrap/components.html#buttonGroups">link</a>). 
Usually, I use </p>

<pre><code>margin: 0 auto; 
</code></pre>

<p>or</p>

<pre><code>text-align: center;
</code></pre>

<p>to center stuff within div, but it doesn't work when inner element has property <code>float: left</code> which in this case uses for visual effects.</p>

<p><a href="http://jsfiddle.net/EVmwe/1/">http://jsfiddle.net/EVmwe/1</a> </p>


How to center .btn-group from twitter-bootstrap?

我使用的是，我发现很难将具有.btn-group ()类的div作为中心。通常，我使用margin: 0 auto; 或text-align: center;在div中居中，但当内部元素具有float: left属性时，它就不起作用了，在本例中，该属性用于视觉效果。

问如何将.btn-group从twitter-bootstrap居中？
EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将.btn-group从twitter-bootstrap居中？EN

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将.btn-group从twitter-bootstrap居中？
EN