引導樣式未按預期工作

Question

在我當前的 ASP.Net 核心中，我正在嘗試為頁面上的搜索組件進行引導樣式設置。 我希望 UI 看起來像

其中標簽/輸入框和“搜索”按鈕出現在屏幕中間，“新建”顯示在同一行但出現在屏幕右側

我試過如下

<div class="center">
    <form asp-action="Index" method="get">
        <div class="row">
            <div class="col-lg-12">
                <div class="row mb-3">
                    <div class="col-lg-4 col-md-2 form-check-inline mr-0">
                        <label class="col-auto" for="holiday"> Find by Holiday </label>
                        <input type="text" class="form-control" name="SearchString" value="@ViewData["CurrentFilter"]" />
                    </div>
                    <div class="col-lg-4 col-md-2  form-check-inline mr-0">
                        <input type="submit" value="Search" class="btn btn-info" />
                        <a class="btn btn-link" asp-action="Index">Back to Full List</a>
                    </div>
                    <div class="col-lg-4 col-md-2  form-check-inline mr-0" style="text-align:right">
                        <a class="btn btn-info" asp-action="Create">Create New</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

UI 如下所示

誰能幫忙說一下我錯過了什么，為什么所有的東西都顯得如此接近，我嘗試添加style="text-align:right"以便 Create new 將出現在右側

***** 編輯 *****

Answer 1

您可以嘗試以這種方式根據您的期望進行相應的實施，如下所示：

Asp.net Submit Form With CSS

<div class="center">
    <form asp-action="Index" method="get">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-2">
                    <label class="col-auto" for="holiday" style="margin-top:10px;"> Find by Holiday </label>
                </div>
                <div class="col-md-3" style="margin-left: -50px;" >
                    <input type="text" class="form-control" name="SearchString" value="@ViewData["CurrentFilter"]" />
                </div>
                <div class="col-md-1">
                    <input type="submit" value="Search" class="btn btn-info" />
                </div>
                <div class="col-md-3">
                    <a class="btn btn-link" asp-action="Index">Back to Full List</a>
                </div>
                <div class="col-md-2">
                    <a class="btn btn-info" asp-action="Create">Create New</a>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </form>
</div>

Output

Note:您可以在不同的 class 文件中設置您的CSS 。 我已經向您展示了如何使用內聯CSS片段來實現這一點。 您也可以使用單獨的文件。 但這是做你想做的事情的正確和方便的方法。

Answer 2

嘗試在“新建”按鈕上添加ml-auto

Answer 3

我的第一個猜測是由您的 class 'col-md-2' 引起的。 您可以將所有 'col-md-2' 更改為 'col-md-4' 進行測試。