javascript - 使用 Bootstrap 居中“行”内容

Question

我无法将内容集中在“行”中，示例中的按钮始终位于左侧，而右侧的空间太大。

有没有办法让这个按钮居中？

谢谢托马斯

<div class="abc">
<div class="row red show-grid">
    <div class="span2 btn">a</div>
    <div class="span2 btn">b</div>
    <div class="span2 btn">c</div>
    <div class="span2 btn">d</div>
    <div class="span2 btn">e</div>
</div>

Answer 1

2018 年更新

引导程序 4

使用自动布局列和text-center

  <div class="row text-center">
    <div class="col-sm border">a</div>
    <div class="col-sm border">b</div>
    <div class="col-sm border">c</div>
    <div class="col-sm border">d</div>
    <div class="col-sm border">e</div>
  </div>

https://www.codeply.com/go/2fDFPSB5A4

---

引导程序 3

使用列偏移和text-center

  <div class="row red show-grid text-center">
    <div class="col-md-2 col-md-offset-1 btn btn-default">a</div>
    <div class="col-md-2 btn btn-default">b</div>
    <div class="col-md-2 btn btn-default">c</div>
    <div class="col-md-2 btn btn-default">d</div>
    <div class="col-md-2 btn btn-default">e</div>
  </div>

https://www.bootply.com/zEYom4EJUF

---

Bootstrap 2（原始答案）

您可以像这样添加 CSS 以使您的跨度居中：

http://jsfiddle.net/sTwj7/9/

<div class="span2 pull-center">
     <h1>a</h1>
</div>

CSS类：

.pull-center {text-align:center;margin:0 auto !important;float:none !important;} 

Answer 2

该类span2具有属性float:left：

<div class="block">
    <div class="row show-grid">
        <div class="span2 btn">a</div>
        <div class="span2 btn">b</div>
        <div class="span2 btn">c</div>
        <div class="span2 btn">d</div>
        <div class="span2 btn">e</div>
    </div>
</div>

CSS：

.block {
    max-width: 500px;
}
.block > div {
    text-align:center;
}
.block > div > div {
    float:none; 
}

我会考虑不将span2（布局和网格类）与btn（按钮样式类）一起使用。

Answer 3

http://jsfiddle.net/sTwj7/10/

HTML

<div class="abc">
    <div class="row red show-grid">
        <div class="btn">a</div>
        <div class="btn">b</div>
        <div class="btn">c</div>
        <div class="btn">d</div>
        <div class="btn">e</div>
    </div>
</div>

CSS

.red {
    background-color: red;
}
.abc {
    max-width: 500px;
}

.red .btn {
    width: 160px;
    margin: 0 auto;
    display: block;
}