2017-06-20 70 views
1

我使用自举4和I需要设置4个图标按钮等2×2形式:自举4显示按钮

所以:

按钮1个按钮2

按钮3按钮4

但是我有是:

按钮1

按钮2

按钮3

按钮4

我的HTML代码是:

<div class="row"> 
<div class="col-md-3"> 
</div> 
<div class="col-sm-6" align="center"> 
<div class="card"> 
    <img class="card-img-top" src="../images/2013.png" alt="Card image cap"> 
    <div class="card-block"> 
    <div class="row"> 
    <div class="col-sm-6"> 
    <div class="card"> 
     <div class="card-block"> 

     <p class="card-text"></p> 
     <a href="patient.php" style="width: 200px;" class="btn btn-primary"><i class="fa fa-group fa-fw" aria-hidden="true"></i> New Client</a> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-6"> 
    <div class="card"> 
     <div class="card-block"> 

     <p class="card-text"></p> 
     <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale</a> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-6"> 
    <div class="card"> 
     <div class="card-block"> 

     <p class="card-text"></p> 
     <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-plus fa-fw" aria-hidden="true"></i> Store</a> 
     </div> 
    </div> 
    </div> 
    </div> 
    <div class="row"> 
    <div class="col-sm-6"> 
    <div class="card"> 
     <div class="card-block"> 

     <p class="card-text"></p> 
     <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-database fa-fw" aria-hidden="true"></i> Report</a> 
     </div> 
    </div> 
    </div> 
    </div> 
    </div> 
</div> 

我应该在我的代码改变什么,从而会采取2x2形式。

回答

1

试试这个

<style>  
.col-sm-12 { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
</style> 

<div class="row "> 
<div class="col-sm-12" style="margin-bottom: 10px;"> 
    <div class="pull-left"> 
     <a href="#" style="width: 200px; margin-right: 10px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale1 </a> 
    </div> 
    <div class=""> 
     <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale2 </a> 
    </div> 
</div> 
<div class="col-sm-12"> 
    <div class="pull-left"> 
     <a href="#" style="width: 200px; margin-right: 10px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale3 </a> 
    </div> 
    <div class=""> 
     <a href="#" style="width: 200px;" class="btn btn-primary"><i class="fa fa-book fa-fw" aria-hidden="true"></i> New Sale4 </a> 
    </div> 
</div> 

+0

如何调整它们的中心? – droidnation

+0

@droidnation:只是更新了代码。请看看,并让我知道 –

+0

关于拉 - *我相信在版本4中替换为float- * – blackhawk