2个引导对象不占用它们拥有的所有空间

时间:2017-05-25 17:26:57

标签: html css twitter-bootstrap

我需要摆脱2个bootstrap对象之间的差距。我打算让textarea更大,但它不会让步。我也必须要小心,因为我不能因为移动友好而硬编码。我会展示一张图片和代码,但由于与我所拥有的项目的联系,很难制作副本。

这是我描述的图片。 enter image description here

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

0 个答案:

没有答案