如何使用引导将按钮对齐到中心

我已经使用Bootstrap创建了一个图块。在瓷砖内部，靠近底部，我想要瓷砖的三个按钮（开始，中间和结束）。如何使用引导将按钮对齐到中心

我做了开始和结束按钮，但使用两个div标签与pull-left和pull-right类。现在我想要的是放置中间的按钮。

这里是我的代码的一部分，并且截图：

<div class="col-lg-12"> 
    <div class="pull-left"> 
     <button class="btn btn-primary btn-sx" type="button">Confirm</button> 
    </div> 

    <!-- I want another button here, center to the tile--> 

    <div class="pull-right"> 
     <button class="btn btn-primary btn-xs pull-right" type="button">Decline</button> 
    </div> 
</div>

来源

2015-08-24 Marlon Brando

有一个自举的最强大的功能是嵌套row元素。每个col-*容器可以有另row里面，然后提供一组完整的12个col空间：

<div class="col-lg-12"> 
    <div class="row"> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-sx" type="button">Confirm</button> 
     </div> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-xs" type="button">Middle Button</button> 
     </div> 
     <div class="col-xs-4"> 
      <button class="btn btn-primary btn-xs" type="button">Decline</button> 
     </div> 
    </div> 
</div>

我不知道如何使你的pull-*类工作完全，但使用引导内置的网格系统，你应该能够摆脱那些。

千万不要错过Bootstrap guide on nesting columns，因为它提供了比这个答案更多的信息。

来源

2015-08-24 13:11:58 Hexaholic

这个效果很好@Hexaholic –

你正在使用引导程序，我认为，所以你最好的选择和做法是利用其网格系统。

用一个名为row的类来创建一个div，并将该父div中的子元素划分为你想要的内容。

这个部门的工作方式是col- [size]后面的数字 - 决定它将占用多少水平空间。最后它必须加起来为12，所以在你的情况下，我们需要三个尺寸为4的零件。

例如：

<div class="row"> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
    <div class="col-xs-4"></div> 
</div>

然后简单地把按钮COL-XS-4 div的内部，你准备好去。

来源

2015-08-24 13:14:37 Bryan

使用此选项：

<div class="text-center"><button class="btn btn-primary btn-sx" type="button">Confirm</button></div>

来源

2015-08-24 13:18:18

谢谢，@Benoit不，我从来没有再为按钮居中对齐使用

标签。 –

如何使用引导将按钮对齐到中心

回答

相关问题