如何让Bootstrap布局中Select与Kendo Upload控件水平对齐？

我需要让Bootstrap布局里的Kendo Upload控件和Select控件在同一水平线上，但目前Upload控件略高于Select控件。

原始Razor代码 #

<div class="form-group row">
        <div class="col-md-6">
            <label asp-for="AuditDetails" class="control-label"></label>
            <select id="ddlAuditDetails" asp-for="AuditDetails" class="form-control">
                <option value="4">--Type of Record--</option>
                <option value="txnNum">Transaction Number</option>
                <option value="custNum">Customer Number</option>
                <option value="doc">Fetch by Uploading File</option>
            </select>
            <span asp-validation-for="TypeOfRecord" class="text-danger"></span>
        </div>
       <div class="col-md-6" id="dvUpload" style="display:none; ">
       
        @(Html.Kendo().Upload()
        .Name("files")
        .Async(a => a
        .Save("Async_Save", "Audit")
        .Remove("Async_Remove", "Audit")
        .AutoUpload(true)
        
        )
        )
        </div>
    </div>

尝试过的无效方法 #

曾为dvUpload容器添加样式style="display:none;display:flex;flex-direction:column"，但Upload控件仍略高于Select控件。

页面渲染后的HTML代码 #

<div class="form-group row">
        <div class="col-md-6">
            <label class="control-label" for="AuditDetails">Select One of the option</label>
            <select id="ddlAuditDetails" class="form-control" name="AuditDetails">
                <option value="4">--Type of Record--</option>
                <option value="txnNum">Transaction Number</option>
                <option value="custNum">Customer Number</option>
                <option value="docHash">Uploading File</option>
            </select>
            
        </div>

        <div class="col-md-6" id="dvTransactionNumber" style="display: none;">
        <label class="control-label" for="TransactionNumber">Transaction Number</label>
        <input class="form-control" type="text" id="TransactionNumber" name="TransactionNumber" value="" />
        <span class="text-danger field-validation-valid" data-valmsg-for="TransactionNumber" data-valmsg-replace="true"></span>

        </div>
        <div class="col-md-6" id="dvCustNumber" style="display: none;">
        <label class="control-label" for="CustNumber">Customer Number</label>
        <input class="form-control" type="text" id="CustNumber" name="CustNumber" value="" />
        <span class="text-danger field-validation-valid" data-valmsg-for="CustNumber" data-valmsg-replace="true"></span>

        </div>

        <div class="col-md-6" id="dvUpload" style="display:none;display:flex;flex-direction:column">
       
        <input id="files" name="files" type="file" /><script>kendo.syncReady(function(){jQuery("#files").kendoUpload({"async":{"autoUpload":true,"saveUrl":"/Auditing/Async_Save","removeUrl":"/Auditing/Async_Remove"}});});</script>
        

        </div>

         
   
    </div>

解决方案 #

1. 统一容器垂直对齐方式 #

使用Bootstrap的flex布局类，让两个列容器内的控件垂直居中，同时用Bootstrap规范类d-none替代重复的display:none样式：

<div class="form-group row">
    <div class="col-md-6 d-flex align-items-center">
        <label asp-for="AuditDetails" class="control-label"></label>
        <select id="ddlAuditDetails" asp-for="AuditDetails" class="form-control">
            <option value="4">--Type of Record--</option>
            <option value="txnNum">Transaction Number</option>
            <option value="custNum">Customer Number</option>
            <option value="doc">Fetch by Uploading File</option>
        </select>
        <span asp-validation-for="TypeOfRecord" class="text-danger"></span>
    </div>
    <div class="col-md-6 d-flex align-items-center d-none" id="dvUpload">
        @(Html.Kendo().Upload()
            .Name("files")
            .Async(a => a
                .Save("Async_Save", "Audit")
                .Remove("Async_Remove", "Audit")
                .AutoUpload(true)
            )
        )
    </div>
</div>

2. 覆盖Kendo Upload的默认样式 #

Kendo Upload控件默认带有顶部边距，添加自定义CSS移除该边距：

.k-upload {
    margin-top: 0;
    padding-top: 0;
}

3. 强制控件基线对齐 #

如果上述方法仍有偏差，可强制设置两个控件的垂直对齐方式：

.k-upload, .form-control {
    vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者rimi