Question

所以我连续有3个按钮（2个自举分割按钮和1个基本按钮），我想相应地放置它们。所以，每个人都在宽度范围内：32％; （他们自己在96％的div中，所以恰好是每个人的第三个＆＃34; mini-div＆＃34;）。然后，我希望每个按钮都在他们的＆＃34; mini-divs＆＃34;中居中。我试过margin: auto，但它没有用。我使用基本按钮使用align-text: center创建了它。然而，另外两个split-buttons，坚持他们的div的左侧。

这是一张图片（蓝色框是＆＃34; mini-divs的边框＆＃34;：

screencap

这是我的HTML ...

<div id="boutons">
    <!-- Split button, ajouter -->
    <div class="btn-group dropup" id="btn1">
        <button type="button" class="btn btn-primary">Ajouter 1 vecteur</button>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu" id="ajouter">
            <li><a href="#">1</a> </li>
            <li><a href="#">2</a> </li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a> </li>
            <li><a href="#">5</a> </li>
        </ul>
    </div>
    <!-- Split button, enlever -->
    <div class="btn-group dropup" id="btn2">
        <button type="button" class="btn btn-danger">Enlever 1 vecteur</button>
        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" role="menu" id="enlever">
            <li><a href="#">1</a> </li>
            <li><a href="#">2</a> </li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a> </li>
            <li><a href="#">5</a> </li>
        </ul>
    </div>
    <div id="btn3">
        <button type="button" class="btn btn-info">Activer le graphique</button>
    </div>
</div>

...和CSS

#boutons
{
    margin-left: auto;
    margin-right: auto;
    width: 96%;
}

.btn-group a
{
    text-align: center;
    font-weight: bold !important;
}

#btn1, #btn2, #btn3
{
    display: inline-block;
    width: 32%;
}

#btn3
{
    text-align: center;    
}

Answer 1

将拆分按钮（或btn-group）放入另一个div：

<div id="boutons">
  <div id="btn1">
    <div class="btn-group dropup" >
      <!-- btn-group content -->
    </div>
  </div>

  <div id="btn2">
    <div class="btn-group dropup">
      <!-- btn-group content -->
    </div>
  </div>

  <div id="btn3">
    <button type="button" class="btn btn-info">Activer le graphique</button>
  </div>
</div>

然后这个css会完美运行：

#boutons > div {
  text-align: center;
}

Answer 2

你必须将你的buttongroup按钮包装在另一个div中以使对齐工作：看看这里： http://www.bootply.com/6FnWLABceC

<div id="btn1">
    <div class="btn-group dropup">
 ...

Answer 3

#btn3
{
    text-align: center;    
}

仅适用于您的btn3

并且

.btn-group a
{
    text-align: center;
    font-weight: bold !important;
}

适用于您的btn

内的a

尝试：

#btn1,
#btn2,
#btn3{
    text-align: center;    
}

Answer 4

将您的CSS更改为此

/* CSS used here will be applied after bootstrap.css */
#boutons
{
    margin-left: auto;
    margin-right: auto;
    width: 96%;
}

.btn-group a
{
    text-align: center;
    font-weight: bold !important;
}

#btn1, #btn2, #btn3
{
    display: inline-block;
    width: 32%; background:#fc0;text-align: center;
}

#btn3
{
    text-align: center;    
}
.btn-group > .btn, .btn-group-vertical > .btn{float:none;}
.btn-group > .btn + .dropdown-toggle {
    padding-right: 8px;
    padding-left: 8px;
    margin-left: -4px;
}

请参阅Bootply（我更改了bg颜色，以便您可以看到对齐方式，但显然必须根据需要进行调整）

定位3个分裂按钮

4 个答案: