我需要摆脱2个bootstrap对象之间的差距。我打算让textarea更大,但它不会让步。我也必须要小心,因为我不能因为移动友好而硬编码。我会展示一张图片和代码,但由于与我所拥有的项目的联系,很难制作副本。
这是HTML。
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading"><strong>Actual Or Potential Nonconformance</strong></div>
<div class="panel-body" style="max-height:210px;">
<textarea class="textarea-fill-container"
rows="6"
data-ng-model="cc.CustomerComplaint.OriginatorDescription"
tabindex="9"
ng-change="cc.saveComplaint(false)"
ng-model-options="{debounce: 750}"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">Customer Complaint</div>
<div class="panel-body small" id="item-details-body" style="max-height: 210px;">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#Details">
<span class="glyphicon glyphicon-list"></span>
Details
</a>
</li>
<li>
<a data-toggle="tab" href="#Files">
<span class="glyphicon glyphicon-file"></span>
Files
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Details">
<div class="subsection" style="border: none; box-shadow: none">
<div class="subsection-body">
<div class="form-group form-inline">
<label for="chkCorrectiveActionRequired" class="control-label">Require CAPA</label>
<input type="checkbox" id="chkCorrectiveActionRequired" data-ng-model="cc.CustomerComplaint.CorrectiveActionRequired" tabindex="10" ng-change="cc.saveComplaint(false)" />
</div>
<div class="form-group form-inline">
<label for="inputCustomerComplaintNumber" class="control-label">CC #</label>
<input type="text"
id="inputCustomerComplaintNumber"
placeholder="Pending Save"
disabled
data-ng-model="cc.CustomerComplaint.CustomerComplaintNumber"
ng-change="cc.saveComplaint(false)"
ng-model-options="{debounce: 750}" />
</div>
<div class="form-group form-inline">
<label for="selectPriority" class="control-label">Priority *</label>
<select data-ng-model="cc.CustomerComplaint.ChangePriorityID"
class="form-control"
id="selectPriority"
tabindex="11"
data-ng-options="priority.ChangePriorityID as priority.Name for priority in cc.ChangePriorities"
required
ng-change="cc.saveComplaint(false)"></select>
</div>
<div class="form-group form-inline">
<label for="selectSource" class="control-label">Source *</label>
<select data-ng-model="cc.CustomerComplaint.ComplaintSourceID"
class="form-control"
id="selectSource"
tabindex="12"
data-ng-options="source.ComplaintSourceID as source.Name for source in cc.ComplaintSources"
required
ng-change="cc.saveComplaint(false)"></select>
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="Files">
<div class="subsection" style="border: none; box-shadow: none">
<div class="subsection-body">
<div data-ng-show="!cc.CustomerComplaint.CustomerComplaintID">
<p class="bg-info padding20">
<span class="glyphicon glyphicon-warning-sign"></span>
Please fill out all required (*) fields.
</p>
</div>
<div data-ng-show="cc.CustomerComplaint.CustomerComplaintID">
<div class="row">
@Html.Partial("~/Areas/Shared/Views/Shared/_addCustomerComplaintFile.cshtml")
</div>
<div class="row">
@Html.Partial("~/Areas/Shared/Views/Shared/_CustomerComplaintFileTable.cshtml")
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default">
<div class="panel-heading"><strong>Notes</strong></div>
<div class="panel-body">
<textarea class="textarea-fill-container"
rows="5"
data-ng-model="cc.CustomerComplaint.Notes"
tabindex="13"
ng-change="cc.saveComplaint(false)"
ng-model-options="{debounce: 750}"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<div class="subsection" style="height: 199px; max-height:199px; overflow:auto;">
<div class="form-group form-inline">
<label for="btnAddComment" class="control-label">Internal Comments</label>
</div>
<table class="table table-striped table-hover table-condensed" data-ng-disabled="cc.CustomerComplaint.StatusID === 51">
<thead>
<tr>
<th>
<a data-ng-disabled="cc.CustomerComplaint.StatusID === 51" class="btn btn-xs" data-toggle="modal" data-target="#modalViewComment" data-ng-click="cc.ActiveComment = {};">
<span class="glyphicon glyphicon-plus"></span>
</a>
</th>
<th>Author</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="comment in cc.CustomerComplaint.CustomerComplaintComments">
<td>
<a class="btn btn-xs" data-toggle="modal" data-target="#modalViewComment" data-ng-click="cc.ActiveComment = comment;">
<span class="glyphicon glyphicon-folder-open"></span>
</a>
</td>
<td data-ng-bind="comment.CreatedBy ? comment.CreatedBy : 'Me'"></td>
</tr>
<tr data-ng-if="!cc.CustomerComplaint.CustomerComplaintComments || cc.CustomerComplaint.CustomerComplaintComments.length === 0">
<td colspan="2" class="bg-info" style="text-align:center">
No Comments Found.
</td>
</tr>
</tbody>
</table>
</div>
</div>