bootstrap div break行

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个对齐的按钮，其中一个按钮会断开另一行。

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

此致 IDO

Answer 1

这是因为默认情况下角度的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可能会为您提供最佳解决方案。

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;