Question

我有一个问题是将内容置于“行”中，example中的按钮总是在左侧，而我在右侧有太多空间。

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

THX 托马斯

<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

班级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 2

2018年更新

Bootstrap 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

Bootstrap 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 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;
}

使用Bootstrap集中“行”内容

3 个答案: