bootstrap div 换行

Question

这是我的代码：

<div class="row">
                <div class="col-lg-2 " align="center"> <img  src="" class="img-circle img-responsive"> </div>
                <div ng-switch on="editMode" class=" col-lg-8 ">
                  <div ng-switch-when="true">
                    <a href ng-click="cancel()" class="btn btn-primary">CANCEL</a>
                    <a href="#" class="btn btn-primary">CHANGE PASSWORD</a>
                    <div ng-switch on="user.status">
                      <div ng-switch-when="ENABLED">
                        <a href ng-click="disableUser()" class="btn btn-primary">DISABLE</a>
                      </div>
                      <div ng-switch-default>
                        <a href ng-click="enableUser()" class="btn btn-primary">ENABLE</a>
                      </div>
                    </div>
                  </div>
                  <div ng-switch-default>
                    <a href ng-click="editUser()" class="btn btn-primary">EDIT</a>
                  </div>
                </div>
            </div>

问题是 dib 打断了一行，而不是在同一行中得到 3 个对齐的按钮，其中一个打断到另一行。

我该怎么做才能解决这个问题？

此致，伊多

Answer 1

因为angular的div默认是display: block。将其样式设置为内联块或使用 ng-if 而不是 switch:

<a href ng-click="cancel()" class="btn btn-primary">CANCEL</a>
<a href="#" class="btn btn-primary">CHANGE PASSWORD</a>
<a ng-if="user.status=='enabled'" href ng-click="disableUser()" class="btn btn-primary">DISABLE</a>
<a ng-if="user.status!='enabled'" href ng-click="enableUser()" class="btn btn-primary">ENABLE</a>

Answer 2

由于您的 Angular 代码为两个不同的按钮提供了一个选项，因此这会略有偏差，但看起来使用 .btn-toolbar 和 .btn-group 可能会为您提供最好的解决方案。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-toolbar">
 <div class="btn-group">
  <a href ng-click="cancel()" class="btn btn-primary">CANCEL</a>
 </div>
  
 <div class="btn-group">
  <a href="#" class="btn btn-primary">CHANGE PASSWORD</a>
 </div>
  
 <div class="btn-group ng-switch on="user.status">
  <div ng-switch-when="ENABLED"><a href ng-click="disableUser()" class="btn btn-primary">DISABLE</a></div>
  <div ng-switch-default><a href ng-click="enableUser()" class="btn btn-primary">ENABLE</a></div>
 </div>
</div>

bootstrap div 换行

bootstrap div breaks line

twitter-bootstrap

angular-ui-bootstrap