twitter-bootstrap – 按钮垂直对齐bootstrap

发布时间：2020-12-18 00:27:47 所属栏目：安全来源：网络整理

导读：我试图以简单的形式对齐按钮.. 我这样做了： div class="panel panel-default" div class="panel-heading"teste/div div class="panel-body" div class="row" div class="col-lg-6" style="padding-right:20px; border-right: 1px solid #ccc;" label class=

我试图以简单的形式对齐按钮..

我这样做了：

<div class="panel panel-default">
          <div class="panel-heading">teste</div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6" style="padding-right:20px; border-right: 1px solid #ccc;">
                       <label class="form-control"> Teste</label>
                        <input type="button" class="form-control btn-danger" value="example" /><br/>
                         <input type="button" class="form-control btn-danger" value="example" /><br/>
                         <input type="button" class="form-control btn-danger" value="example" /><br/>
                         <input type="button" class="form-control btn-danger" value="example" /><br/>
                    </div>
                    <div class="col-lg-6"  style="margin:0 auto;"  >
                            <input type="button"   value="bot?o" />
                     </div>
                      </div>
            </div>
        </div>

但我希望此按钮居中,如下图所示：

我怎样才能做到这一点？我使用“style =”margin：0 auto;“在div上但没有工作..

解决方法

我已经让你成为一个可能的解决方案的例子.它可能需要一些额外的工作,但它显示了一般的想法.

jsFiddle Demo

我为这个演示添加了一个名为vertical-container的新类.

.vertical-container .row {
    display: table;
    width: 100%;
}
.vertical-container .row > .col-lg-6 {
    display: table-cell;
    vertical-align: middle;
    /* float: none;          ~~~~~ Use this setting if needed */
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!