Question

我的面板体内有一个btn工具栏，并希望：

按钮组中心
确保在移动视图中，三个按钮位于顶部，三个位于底部。

有很多类似的问题，我尝试了各种潜在的解决方案，但似乎没有任何工作（text-align：center，margin：0 auto等）。任何帮助将不胜感激。

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="btn-toolbar">
            <button type="button" class="btn btn-primary" id="btn2016">2016</button>
            <button type="button" class="btn btn-primary" id="btn2015">2015</button>
            <button type="button" class="btn btn-primary" id="btn2014">2014</button>
            <button type="button" class="btn btn-primary" id="btn2013">2013</button>
            <button type="button" class="btn btn-primary" id="btn2012">2012</button>
            <button type="button" class="btn btn-primary" id="btn2011">2011</button>
            <button type="button" class="btn btn-primary" id="btn2010">2010</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

要确保按钮为中心，您可以将按钮的容器设置为display: inline-block，将容器设置为text-align: center。
您有7个按钮，但通过上述更改，它们在移动设备上看起来没问题。

以下是您需要的CSS：

.panel-body {
  text-align: center;
}
.btn-toolbar {
  display: inline-block;
}
.btn-toolbar .btn {
  margin-bottom: 5px;
}

检查代码栈：
http://codepen.io/anon/pen/MbQRrY

在面板中居中btn工具栏

1 个答案: