引导样式未按预期工作

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' 进行测试。