Bootstrap 样式未按预期工作

Question

在我当前的 ASP.Net 核心中，我正在尝试为页面上的搜索组件设置引导带样式。我希望 UI 看起来像

label/input 框和搜索按钮出现在屏幕中间，新建显示在同一行但出现在屏幕右侧

我试过如下

<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

尝试在 'Create New' 按钮上添加 ml-auto

Answer 2

我的第一个猜测是由你的 class 'col-md-2' 引起的。您可以将 'col-md-2' 全部更改为 'col-md-4' 以进行测试。

Answer 3

You could try this way to implement accordingly as per your expectations like below:

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: You could set your CSS in different class file. I have shown you how could you achieve that using inline CSS snippet. You could use separate file as well. But this is the right and convenient way to do what you are trying to.

Bootstrap 样式未按预期工作

Bootstrap Styling is not working as expected

html

css

razor

asp.net-core-mvc

asp.net-core