我正在尝试在页面顶部添加几个按钮：保存并取消。只有在点击“客户信息”面板上的“提交”按钮后才会显示它们。但是，它只会按下“客户信息”面板，我还需要将“搜索计划”面板按下一行，以便每个面板的顶部保持水平。这是我的代码：
<div ng-controller="MchPlanAddController">
<!--<a href="#/MchPlan">BACK</a>-->
<h3>UNDERWRITING RULES MAINTENANCE - Add Plan Information</h3>
<div class="col-lg-8">
<table style="width:100%; table-layout:auto">
<tr>
<td style="vertical-align:bottom">
<div ng-if="vm.customer" class="panel" style="margin-left:15px">
<button class="btn btn-success navbar-btn"
ng-click="vm.save()"
title="Save pending changes to any and all todolists">
<i class="glyphicon glyphicon-floppy-disk"></i> Save
</button>
<button class="btn btn-danger navbar-btn" ng-click="vm.cancel()"
title="Discard changes and refresh from the server">
<i class="glyphicon glyphicon-refresh"></i> Cancel
</button>
<span class="alert alert-danger" ng-if="vm.getChangesCount()">
Unsaved changes: {{vm.getChangesCount()}}
</span>
</div>
</td>
</tr>
</table>
<table style="width:100%; table-layout:auto">
<tr>
<td>
<div class="panel panel-default">
<div class="panel-heading">Customer Information<span ng-if="vm.customer">: {{vm.customer.CustomerName}}</span></div>
<form name="vm.MchPlanStartForm" ng-submit="vm.getCustomer(vm.MchPlanStartForm.customerNumber);" class="form-horizontal" style="margin:15px">
<fieldset ng-disabled="vm.MchPlanStartForm.disabled">
<div class="form-group">
<label class="col-sm-4 control-label">Customer Number: </label>
<div class="col-sm-4">
<input type="text" ng-model="vm.MchPlanStartForm.customerNumber" class="form-control" required />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label">Effective Date of Change: </label>
<div class="col-sm-4">
<input type="date" ng-model="vm.changeEffectiveDate" class="form-control" required />
</div>
</div>
<button type="submit" class="btn pull-left">Submit</button>
<i class="fa fa-spinner fa-spin" ng-show="vm.loadingCustomer"></i>
</fieldset>
</form>
</div>
</td>
<!--<td style="vertical-align:bottom">
<div ng-if="vm.customer" class="panel" style="margin-left:15px">
<button class="btn btn-success navbar-btn"
ng-click="vm.save()"
title="Save pending changes to any and all todolists">
<i class="glyphicon glyphicon-floppy-disk"></i> Save
</button>
<button class="btn btn-danger navbar-btn" ng-click="vm.cancel()"
title="Discard changes and refresh from the server">
<i class="glyphicon glyphicon-refresh"></i> Cancel
</button>
<span class="alert alert-danger" ng-if="vm.getChangesCount()">
Unsaved changes: {{vm.getChangesCount()}}
</span>
</div>
</td>-->
</tr>
</table>
<div class="panel panel-default" ng-if="vm.customer">
<table class="table " data-gps-droppable="vm.dropOnMch(dragEl, dropEl)">
<thead>
<tr>
<th></th>
<th>Customer Number</th>
<th>PlanCode</th>
<th>Contract Number</th>
<th>Plan Effective Date</th>
<th>Status</th>
<th>Status Date</th>
<th>Trust Number</th>
</tr>
</thead>
<tr ng-repeat="plan in vm.mchPlans">
<td><i class="fa fa-times" ng-click="vm.remove(plan)"></i></td>
<td><span ng-bind="plan.CustomerNumber"></span></td>
<td><span ng-bind="plan.PlanCode" /> </td>
<td><span ng-bind="plan.ContractNumber" /> </td>
<td><input type="date" ng-model="plan.PlanEffectiveDate" z-validate /> </td>
<td><select ng-model="plan.PlanStatus" ng-options="status for status in vm.planStatuses" z-validate /> </td>
<td><input type="date" ng-model="plan.PlanStatusDate" z-validate /> </td>
<td><input type="text" ng-model="plan.TrustNumber" z-validate /> </td>
</tr>
<tr>
<td colspan="99">Drop Plans Here to add them.</td>
</tr>
</table>
</div>
</div>
<!--Search for Plan-->
<div class="col-lg-4 ">
<div class="panel panel-default ">
<div class="panel-heading">Search for plan</div>
<form name="PlanDesignSearchForm" class="form-horizontal" style="margin:15px">
<fieldset>
<div class="form-group">
<label class="col-sm-5 control-label">Contract Number: </label>
<div class="col-sm-7">
<input type="text" ng-model="contractnumber" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-sm-5 control-label">PlanCode:</label>
<div class="col-sm-7">
<input type="text" ng-model="plancode" class="form-control" />
</div>
</div>
<button type="submit" ng-click="vm.searchPlans(contractnumber, plancode)" class="btn pull-right">Search</button>
<i class="fa fa-spinner fa-spin" ng-show="vm.searchingPlans"></i>
</fieldset>
</form>
</div>
<div class="panel panel-default" ng-if="vm.planDesigns">
<table class="table ">
<thead>
<tr>
<th>Contract</th>
<th>PlanCode</th>
<th>Orig Eff Date</th>
</tr>
</thead>
<tr ng-repeat="planDesign in vm.planDesigns" data-gps-draggable>
<td>{{planDesign.ContractNumber}}</td>
<td>{{planDesign.PlanCode}}</td>
<td>{{planDesign.OriginalEffectiveDate | date:'MM/dd/yyyy'}}</td>
</tr>
<tr ng-if="vm.planDesigns.length==0">
<td colspan="3">No plans found</td>
</tr>
</table>
</div>
</div>
</div>
<style>
.input-contain input {
width: 100%;
}
</style>
答案 0 :(得分：1)
将按钮放在一个单独的行中。
<div class="row">
<div class="col-md-12">
... your buttons here ...
</div>
</div>
<div class="row">
<div class="col-md-8">
... your panels here ...
</div>
<div class="col-md-4">
... your panels here ...
</div>
</div>
答案 1 :(得分：0)
我需要从它所在的div中删除按钮。它被包裹的div只有8/12的屏幕，因此它为什么只移动屏幕的8/12。所以，我只是将它移到了那个之外并给它自己的div。
以下是修补它的代码片段：
<div ng-controller="MchPlanAddController">
<!--<a href="#/MchPlan">BACK</a>-->
<h3>UNDERWRITING RULES MAINTENANCE - Add Plan Information</h3>
<div ng-if="vm.customer" class="panel" style="margin-left:15px">
<button class="btn btn-success navbar-btn"
ng-click="vm.save()"
title="Save pending changes to any and all todolists">
<i class="glyphicon glyphicon-floppy-disk"></i> Save
</button>
<button class="btn btn-danger navbar-btn" ng-click="vm.cancel()"
title="Discard changes and refresh from the server">
<i class="glyphicon glyphicon-refresh"></i> Cancel
</button>
<span class="alert alert-danger" ng-if="vm.getChangesCount()">
Unsaved changes: {{vm.getChangesCount()}}
</span>
</div>
<div class="col-lg-8">
<table style="width:100%; table-layout:auto">
<tr>