單選按鈕相互重疊

我正在使用bootstrap 4.3幾個單選按鈕構建一個表單，但問題是，它相互重疊，如下所示。

我在 jsfiddle 中嘗試過，結果是一樣的。這是我在 jsfiddle 的作業：https ://jsfiddle.net/hifni/ky3xzej0/7/

我的Razor頁面如下所示：

<div class="alert alert-info">
    <p>The request will enable your Credit Balance to be in your account for future trading/settlement.</p>
    <footer class="blockquote-footer">Subject to T&C</footer>
</div>

<style>
    .form-control {
        height: auto;
    }
</style>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

        <div class="form-group">
            @Html.HiddenFor(model => model.AccountId)
            <input type="hidden" id="tempStore" />
            @Html.HiddenFor(model => model.SendSMS)
            @Html.HiddenFor(model => model.RequiresApproval)
        </div>

        <div class="form-group">
            <label>Pick a Settlement Mode</label>
            <div class="form-control">
                <div class="form-check">
                    @Html.RadioButtonFor(model => model.IsSettlementOnHold, "No", new { @class = "form-check-input", @id = "rbIsSettlementOnHold_No" })
                    @Html.Label("rbIsSettlementOnHold_No", "Standard ", new { @class = "form-check-label" })
                    @Html.RadioButtonFor(model => model.IsSettlementOnHold, "Yes", new { @class = "form-check-input", @id = "rbIsSettlementOnHold_Yes" })
                    @Html.Label("rbIsSettlementOnHold_Yes", "On Request ", new { @class = "form-check-label" })
                    @Html.ValidationMessageFor(model => model.IsSettlementOnHold, "", new { @class = "text-danger" })
                </div>
            </div>
        </div>

        <div class="form-group">
            @Html.TextAreaFor(model => model.AdditionalNote, 3, 50, new { @class = "form-control", @placeholder = "Any Aditional Note" })
            @Html.ValidationMessageFor(model => model.AdditionalNote, "", new { @class = "text-danger" })
        </div>

        <div class="form-group">
            @*<input type="submit" value="Submit" class="btn btn-default" id="btnSelfServiceRequestSubmit"/>*@
            <button type="submit"
                    class="btn btn-dark"
                    id="btnSelfServiceRequestSubmit"
                    @*data-toggle="modal"
                        data-target="#modalEntityDetail"
                        data-url="@Url.Action("_CodePrompt", "ExternalSelfServiceRequest")"*@>
                Submit
            </button>
            <button type="reset"
                    class="btn btn-warning">
                Reset
            </button>
        </div>

        @if (Model.RequiresApproval.Equals("Yes"))
        {
            <div class="alert alert-info" role="alert">
                For security verification purpose you will be required to access your JKSB Registered Mobile, there will
                be a verification code sent to it.
            </div>

        }


    </div>
}

感謝任何幫助。

uj5u.com熱心網友回復：

您可以像這樣分隔您的“表單檢查” div；

<div class="form-control">
      <div class="form-check  form-check-inline">
        <input checked="checked" class="form-check-input" id="rbIsSettlementOnHold_No" name="IsSettlementOnHold" type="radio" value="No">
        <label for="rbIsSettlementOnHold_No" class="form-check-label"> Standard</label>
       
      </div>
      <div class="form-check  form-check-inline">
       
        <input class="form-check-input" id="rbIsSettlementOnHold_Yes" name="IsSettlementOnHold" type="radio" value="Yes">
        <label for="rbIsSettlementOnHold_Yes" class="form-check-label"> On Request </label>

      </div>
    </div>

并且使用“form-check-inline”類將為您提供水平對齊。

我希望這有幫助。

標籤：asp.net-mvcasp.net 核心引导程序 4单选按钮

上一篇：目錄和檔案的反向排序串列

下一篇：如何從圖表中的控制器加載動態標簽和資料？