Question

我有自举面板，当前按钮以内联方式显示，如何在垂直方向显示这些按钮？

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>

Answer 1

看起来你已经有答案了。使用class="btn-group-vertical"。并添加自定义样式以在按钮之间添加空间。 Demo

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

Answer 2

.panel-body button {
    display: block;
    float: none;
}

如何使用自举面板在垂直方向上显示按钮？

2 个答案: