Bootstrap樣式未按預期作業

在我當前的 ASP.Net 核心中，我正在嘗試為頁面上的搜索組件設定引導帶樣式。我希望用戶界面看起來像

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

我試過如下

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

用戶界面如下所示

任何人都可以幫助說我想念為什么所有的東西看起來如此接近，我嘗試添加style="text-align:right"所以 Create new 將出現在右側

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

<style type="text/css">
    .center {
        margin: auto;
        width: 100%;
    }
</style>

<div class="center">
    <form asp-action="Index" method="get">
        <div class="row">
            <div class="col-lg-12">
                <div class="row mb-5">
                    <div class="col-lg-8 col-md-6  form-check-inline mr-0" style="justify-content: center;">
                        <label class="col-auto" for="holiday"> Find Holiday </label>
                        <input type="text" class="form-control" name="SearchString" value="@ViewData["CurrentFilter"]" />
                        <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-3 col-md-4  ml-auto form-check-inline mr-0 " style="justify-content: end;">
                        <a class="btn btn-info" asp-action="Create">Create New</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

uj5u.com熱心網友回復：

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

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:您可以CSS在不同的類檔案中設定。我已經向您展示了如何使用行內CSS代碼段實作這一目標。您也可以使用單獨的檔案。但這是做您想做的事情的正確且方便的方法。

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

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

標籤：html css asp.net核心 剃刀 asp.net-core-mvc

上一篇：如何阻止我的影像被切斷？

下一篇：為什么標準元素上的偽選擇器樣式規則也適用于相關的偽元素？