将样式添加到 Search/filters 组件 (Bootstrap) ASP.NET 核心

Question

我正在尝试设置样式并将多个搜索过滤器放在一行中，这样用户体验会好得多，但我对如何设置此搜索组件的样式有些困惑

<section class="search-sec">
 <div class="container">
    <form asp-action="Index" method="get">
        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-lg-3 col-md-2 col-sm-12 p-0">
                        <input class="" type="text" name="name" placeholder="Name" value="@ViewData["name"]" />
                    </div>
                    <div class="col-lg-2 col-md-2 col-sm-12 p-0">
                            <label for="age" class="">Age</label>
                            <select class="" name="age">
                                ........
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                        <label for="minAge">Age range between</label>
                        <select name="minAge">
                         ......
                        </select>
                        and
                        <select name="maxAge">
                           ......
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                        <label for="sex">Sex</label>
                        <select name="sex">
                            .....
                        </select>
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                        <label for="stockNumber">Find by Stock Number</label>
                        <input type="text" name="stockNumber" value="@ViewData["stockNumber"]" 
                    </div>
                    <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                        <input type="submit" value="Search" class="btn btn-default" /> |
                        <a class="btn btn-link" asp-action="Index">Clear</a>
                    </div>
                    </div>
                </div>
            </div>
       </form>
     </div>
    </section>

即使更改尺寸后仍出现问题，如下所示

我尝试寻找引导示例，但没有任何帮助。谁能建议我如何使此搜索功能看起来更好。非常感谢任何帮助

Answer 1

网格系统包含 12 列。如果要排成一行，col-lg-*中的*总和应该在12以内。然后还需要调整字母，避免字母长度超过div宽度。

这是一个完整的工作演示：

<section class="search-sec">
    <div class="container-fluid">
        <form asp-action="Index" method="get">
            <div class="row">
                <div class="col-lg-12">
                    <div class="row">
                        <div class="col-lg-1 col-md-2 col-sm-12 p-0">
                            <input class="" type="text" name="name" placeholder="Name" value="@ViewData["name"]" />
                        </div>
                        <div class="col-lg-2 col-md-2 col-sm-12">
                            <label for="age" class="">Age</label>
                            <select class="" name="age">
                                <option>- Any -</option>
                                <option>aaa</option>
                                <option>bbb</option>
                                <option>ccc</option>
                            </select>
                        </div>
                        <div class="col-lg-3 col-md-3 col-sm-12 p-0">
                            <label for="minAge">Age range from</label>
                            <select name="minAge">
                                <option>- Start -</option>
                                <option>1</option>
                                <option>2</option>
                            </select>
                            to
                            <select name="maxAge">
                                <option>- End -</option>
                                <option>14</option>
                                <option>15</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-3 col-sm-12">
                            <label for="sex">Sex</label>
                            <select name="sex">
                                <option>- Either -</option>
                                <option>male</option>
                                <option>female</option>
                            </select>
                        </div>
                        
                        <div class="col-lg-1 col-md-3 col-sm-12 p-0">
                            <label for="stockNumber">Stock No.</label>
                        </div>

                            <div class="col-lg-1 col-md-3 col-sm-12 p-0">
                                <input type="text" name="stockNumber" value="aaa" />
                            </div>
                            <div class="col-lg-2 col-md-3 col-sm-12 p-0">
                                <input type="submit" value="Search" class="btn btn-default" /> |
                                <a class="btn btn-link" asp-action="Index">Clear</a>
                            </div>
                        </div>
                    </div>
            </div>
        </form>
    </div>
</section>
@section Scripts
{
<style>
    input[type="text"] {
        width: 100%;   //fit the div width
    }
    select {
        width: 65px;
    }
</style>
}

结果：

将样式添加到 Search/filters 组件 (Bootstrap) ASP.NET 核心

Add Styling to the Search/filters component (Bootstrap) ASP.NET core

html

css

razor

asp.net-core

bootstrap-4