2016-08-01 12 views
0

現在、ボタンがインラインで表示されているブートストラップパネルがありますが、これらのボタンをどのように縦に表示できますか?あなたはすでにそこに答えを持っているようブートストラップパネルを使用してボタンを縦に表示するにはどうすればよいですか?

main.htmlとは

<div class="col-md-3"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Control</div> 
       <div class="panel-body"> 
       <!--  <div class="btn-group-vertical">--> 
         <button type="button" class="btn btn-danger btn-rad btn-lg" style="margin-left: 10px" ng-click="recordLogs()" ng-disabled="disabledRecBtn"><span class="glyphicon glyphicon-record"></span></button> 
         <!-- <br>--> 
         <button type="button" class="btn btn-primary btn-lg" style="margin-left: 10px" ng-click="stopLogs()" ng-disabled="disabledStopBtn"><span class="glyphicon glyphicon-stop"></span></button> 
         <!--<br>--> 
         <button type="button" class="btn btn-default btn-lg" style="margin-left: 10px" ng-click="searchLogs()"><span class="glyphicon glyphicon-search"></span></button> 
         <!--<br>--> 
         <button type="button" class="btn btn-default btn-lg" ng-click="serverFiles()" style="margin-left: 10px"><span class="glyphicon glyphicon-folder-close"></span></button> 
       <!--  </div>--> 
       </div> 
      </div> 

答えて

1

に見えます。 class="btn-group-vertical"を使用してください。また、カスタムスタイルを追加してボタン間にスペースを追加します。 Demo

.btn-group-vertical > button{ 
    margin-bottom:10px; 
} 
+0

私はので、私はCOL-MD-3にこれらのボタンを持っているが、私はクラスBTN-グループ・垂直を追加するとき、私は右側のスペースの多くを持って知っているうん、その空白をクリアする方法はあります? – hussain

+0

@hussainなぜ 'col-md-1'を使うことができないのでしょうか?実際のパネルは、btnグループではなく、十分なスペースを占めています。 –

+0

反対側私はちょうどそれを保ちたいcol-md-9 – hussain

0
.panel-body button { 
    display: block; 
    float: none; 
} 
関連する問題