Bootstrap <div>边界弯曲

Question

我在具有可填写字段的cshtml页面上创建了一个表单，然后将其导出为PDF。我用边框设置了Bootstrap行和列的样式，使其看起来像我们正在建模的形式。我注意到有些边界线排列不正确，看起来有些弯曲。

我在页面上有一些CSS类来处理我打开或关闭的各种边框，因此边框不会加倍，从而形成粗线

<style>
        .gridCellBorder{
            border-top-width: thin;
            border-left-width: thin;
            border-top-style:solid;
            border-left-style:solid;
        }
        .gridCellBorderLeftOnly {
            border-left-width: thin;
            border-left-style: solid;
        }
        .gridCellBorderRight {
            border-top-width: thin;
            border-left-width: thin;
            border-right-width: thin;
            border-top-style: solid;
            border-left-style: solid;
            border-right-style: solid;
        }
        .gridCellBorderLeftRightOnly {
            border-left-width: thin;
            border-right-width: thin;
            border-left-style: solid;
            border-right-style: solid;
        }
        .gridCellBorderRightOnly {
            border-top-width: thin;
            border-right-width: thin;
            border-top-style: solid;
            border-right-style: solid;
        }
    </style>

这是我的行和列代码的示例

<div class="row">
            <div class="col-md-9 gridCellBorder">
                <h3 style="font-weight:bold; text-align:center;">RECORD OF WEIGHTED GUIDELINES APPLICATION</h3>
            </div>
            <div class="col-md-3 gridCellBorderRight"></div>
        </div>

        <div class="row">
            <div class="col-md-2 gridCellBorder">1. REPORT NO.</div>
            <div class="col-md-6 gridCellBorder">2. BASIC PROCUREMENT INSTRUMENT IDENTIFICATION NO.</div>
            <div class="col-md-2 gridCellBorder">3. SPIIN</div>
            <div class="col-md-2 gridCellBorderRight">4. DATE OF ACTION</div>
        </div>

        <div class="row">
            <div class="col-md-2 gridCellBorder">
                @Html.EJS().InPlaceEditor("textReportNo").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
            </div>
            <div class="col-md-6 gridCellBorder">
                <div class="row">
                    <div class="col-md-3 gridCellBorder" style="font-size:small;">a. PURCHASING OFFICE</div>
                    <div class="col-md-3 gridCellBorder" style="font-size:small;">b. FY</div>
                    <div class="col-md-3 gridCellBorder" style="font-size:small;">c. TYPE PROC INST CODE</div>
                    <div class="col-md-3 gridCellBorderRight" style="font-size:small;">d. PRISN</div>
                </div>
                <div class="row">
                    <div class="col-md-3 gridCellBorderLeftOnly">
                        @Html.EJS().InPlaceEditor("textPurchasingOffice").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
                    </div>
                    <div class="col-md-3 gridCellBorderLeftOnly">
                        @Html.EJS().InPlaceEditor("textFY").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
                    </div>
                    <div class="col-md-3 gridCellBorderLeftOnly">
                        @Html.EJS().InPlaceEditor("textTypeProcInstCode").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
                    </div>
                    <div class="col-md-3 gridCellBorderLeftOnly">
                        @Html.EJS().InPlaceEditor("textPrisn").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
                    </div>
                </div>
            </div>
            <div class="col-md-2 gridCellBorder">
                @Html.EJS().InPlaceEditor("textSpiin").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
            </div>
            <div class="col-md-2 gridCellBorderRight">
                @Html.EJS().InPlaceEditor("dateOfAction").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Date).ShowButtons(false).SubmitOnEnter().Render()
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 gridCellBorder">5. CONTRACTING OFFICE CODE</div>
            <div class="col-md-1 gridCellBorder"></div>
            <div class="col-md-3 gridCellBorder"></div>
            <div class="col-md-2 gridCellBorderRight"></div>
        </div>
        <div class="row">
            <div class="col-md-6 gridCellBorderLeftOnly">
                @Html.EJS().InPlaceEditor("textContractOfficeCode").Mode(Syncfusion.EJ2.InPlaceEditor.RenderMode.Inline).Type(Syncfusion.EJ2.InPlaceEditor.InputType.Text).ShowButtons(false).SubmitOnEnter().Render()
            </div>
            <div class="col-md-1 gridCellBorderLeftOnly">ITEM</div>
            <div class="col-md-3 gridCellBorderLeftOnly">COST CATEGORY</div>
            <div class="col-md-2 gridCellBorderLeftRightOnly">OBJECTIVE</div>
        </div>

我认为通过使用Bootstrap，设计对于可变的行和列将是灵活的，但是我想知道使用表将使样式更简单，更简洁。

感谢您的帮助