Boostrap/CSS垂直响应的响应式

Question

我有3 <a>，其上有btn引导类。

我发现如何与上面的代码水平和垂直居中的

HTML

<div class="row row-centered "> 
    <div class="vertically-centered"> 
     <div class="col-xs-12 col-sm-12"> 
      <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Prepare</a> 
      <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#" style="margin-left: 100px; margin-right: 100px;">Handover</a> 
      <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Tuto</a> 
     </div> 
    </div> 
</div> 

CSS

.btn-lg{ 
     padding-top: 50px; 
     padding-bottom: 50px; 
     padding-left: 10px; 
     padding-right:10px; 
    } 

    .row-centered { 
     text-align: center; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     font: 0/0 a; 
    } 

    .row-centered:before { 
     content: ' '; 
     display: inline-block; 
     vertical-align: middle; 
     height: 100%; 
    } 

    .vertically-centered { 
     vertical-align: middle; 
     display: inline-block; 
     width: 100%; 
    } 

    .col-centered { 
     display: inline-block; 
     float: none; 
    } 

它按预期工作当屏幕宽足够的

但是，当屏幕较小（宽度）比830px

编辑

我更改HTML和CSS

HTML改进

<div class="row row-centered "> 
    <div class="vertically-centered"> 
     <div class="col-xs-12 col-sm-4 col-md-4"> 
      <a class="btn btn-lg btn-default btn-primary" href="#">Prepare</a> 
     </div> 
     <div class="col-xs-12 col-sm-4 col-md-4"> 
      <a class="btn btn-lg btn-default btn-primary" href="#">Handover</a> 
     </div> 
     <div class="col-xs-12 col-sm-4 col-md-4"> 
      <a class="btn btn-lg btn-default btn-primary" href="#">Tuto</a> 
     </div> 
    </div> 
</div> 

它失败

CSS改进

.btn-lg{ 
      padding-top:30px; 
      padding-bottom:30px; 
      width:100%; 
     } 

    .row-centered { 
     text-align: center; 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     font: 0/0 a; 
    } 

    .row-centered:before { 
     content: ' '; 
     display: inline-block; 
     vertical-align: middle; 
     height: 100%; 
    } 

    .vertically-centered { 
     vertical-align: middle; 
     display: inline-block; 
     width: 100%; 
    } 

    .col-centered { 
     display: inline-block; 
     float: none; 
    } 

现在我的问题是，我扣在上面相互（这是好的）对齐，但他们都倒在我nav-background

Answer 1

解决它的问题是，资产净值为的是定制类，而不是从自举

Answer 2

变化会在中间保证金按钮的百分比值：

<a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#" style="margin-left: 5%; margin-right: 5%;">Handover</a> 

Answer 3

我认为这是因为您使用之前的余量和在中间的链接。我尝试做的是与空列

<div class="row row-centered "> 
    <div class="vertically-centered"> 
     <div class="col-xs-12 col-sm-12"> 
      <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Prepare</a> 
     <a class="btn btn-lg btn-default btn-primary col-centered col-xs-1 col-sm-1 col-md-1" href="#"></a> 
      <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Handover</a> 
      <a class="btn btn-lg btn-default btn-primary col-centered col-xs-1 col-sm-1 col-md-1" href="#"></a> 
     <a class="btn btn-lg btn-default btn-primary col-centered col-xs-3 col-sm-3 col-md-3" href="#">Tuto</a> 
     </div> 
    </div> 
</div>