引导样式未按预期工作

Question

在我当前的 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>

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: 你可以在不同的类文件中设置你的CSS。我已经向您展示了如何使用内联CSS sn-p 实现这一目标。你 也可以使用单独的文件。但这是正确和方便的 做你想做的事的方法。