在我的 div 类之间放置空间并对齐它们

Question

我的页面和数据卡 ASP.Net Core 应用程序上几乎没有搜索过滤器。我正在尝试在页面上对齐它们，以便看起来更好。目前如下图所示

<div class="container-fluid">
    <div class="row">
       <div class="col-md-3">
         <div class="card  border-info mb-3" style="max-width: 12rem;">
            <div class="card-header text-center"><b>Current Shipping Address</b></div>
            <div class="card-body text-info" style="font-size: 14px;">
                <b><h7 class="card-title">Location</h7></b>
                <p class="card-text">
                    @Html.DisplayFor(model => model.CustomerData.Location)
                    <br />@Html.DisplayFor(model => model.CustomerData.Address1)
                </p>
            </div>
        </div>
      </div>

      <div class="col-md-9">
        <section class="search-sec">
            <div class="container-fluid">
                <form asp-action="Index" method="get">
                    <div class="row">
                        <div class="col-lg-9">
                            <div class="row">
                                <div class="col-lg-5 col-md-2 col-sm-12 p-0">
                                    <label for="name" class="">Strain Name</label>
                                    <input class="" type="text" name="name" value="@ViewData["name"]" />
                                </div>
                                <div class="col-lg-4 col-md-2 col-sm-12 p-0">
                                    <label for="genotype" class="">Genotype</label>
                                    <input class="" type="text" name="genotype" value="@ViewData["genotype"]" />
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-lg-3 col-md-2 col-sm-12 p-0">
                                    <label for="age" class="">Age</label>
                                    <select class="" name="age">
                                      ......
                                    </select>
                                </div>

                                <div class="col-lg-6 col-md-2 col-sm-12 p-0">
                                    <label for="minAge">Age range between</label>
                                    <select name="minAge">
                                     .......
                                    </select>
                                    and
                                    <select name="maxAge">
                                       ........
                                    </select>
                                </div>

                            </div>
                            <div class="form-row">
                                <div class="col-lg-3 col-md-2 col-sm-12 p-0">
                                    <label for="sex">Sex</label>
                                    <select name="sex">
                                        ......
                                    </select>
                                </div>

                                <div class="col-lg-3 col-md-2 col-sm-12 p-0">
                                    <div class="form-group form-actions col-md-10 no-color">
                                        <label for="stockNumber">Find by Stock Number</label>
                                        <input type="text" name="stockNumber" value="@ViewData["stockNumber"]" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-2 col-sm-12 p-0">
                                <input type="submit" value="Search" class="btn btn-default" /> |
                                <a class="btn btn-link" asp-action="Index">Return to Original List</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
       </div>
   </div>
 </div>

我正在尝试将数据卡放在左侧并将右侧的搜索过滤器对齐 2 行并将它们显示为 3 行。 我尝试更改过滤器每一行中col-lg-* 的大小，但仍然无法像我尝试的那样对齐它们，非常感谢任何帮助

Answer 1

<div class="container-fluid">
    <div class="row">
       <div class="col-md-3">
         <div class="card  border-info mb-3" style="max-width: 12rem;">
            <div class="card-header text-center"><b>Current Shipping Address</b></div>
            <div class="card-body text-info" style="font-size: 14px;">
                <b><h7 class="card-title">Location</h7></b>
                <p class="card-text">
                    @Html.DisplayFor(model => model.CustomerData.Location)
                    <br />@Html.DisplayFor(model => model.CustomerData.Address1)
                </p>
            </div>
        </div>
      </div>

      <div class="col-md-9">
        <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 mb-3">
                                <div class="col-lg-6 col-md-2 form-check-inline mr-0">
                                    <label for="name" class="col-auto">Strain Name</label>
                                    <input class="form-control" type="text" name="name" value="@ViewData["name"]" />
                                </div>
                                <div class="col-lg-6 col-md-2  form-check-inline mr-0">
                                    <label for="genotype" class="col-auto">Genotype</label>
                                    <input class="form-control" type="text" name="genotype" value="@ViewData["genotype"]" />
                                </div>
                            </div>
                            <div class="row mb-3">
                                <div class="col-lg-3 col-md-2 col-sm-12 form-check-inline m-0">
                                    <label for="age" class="col-auto" >Age</label>
                                    <select class="form-control px-1" name="age">
                                     <option>-Any-</option>
                                    </select>
                                </div>

                                <div class="col-lg-9 col-md-2 col-sm-12 form-check-inline m-0 justify-content-between">
                                    <label class="col-auto" for="minAge">Age range between</label>
                                    <select class="form-control" name="minAge">
                                      <option>-Start-</option>
                                    </select>
                                    <label class="col-auto" for="minAge">and</label>
                                    <select class="form-control" name="maxAge">
                                       <option>-End-</option>
                                    </select>
                                </div>

                            </div>
                            <div class="row">
                                <div class="col-lg-2 col-md-2 col-sm-12 form-check-inline m-0">
                                    <label class="col-auto" for="sex">Sex</label>
                                    <select class="form-control px-1" name="sex">
                                        <option>-Either-</option>
                                    </select>
                                </div>

                                <div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
                                        <label class="col-auto" for="stockNumber">Find by Stock Number</label>
                                        <input type="text" class="form-control" name="stockNumber" value="@ViewData["stockNumber"]" />
                                </div>
                              <div class="col-lg-5 col-md-2 col-sm-12 form-check-inline m-0">
                                <input type="submit" value="Search" class="btn btn-default" /> |
                                <a class="btn btn-link" asp-action="Index">Return to Original List</a>
                            </div>
                            </div>

                            
                        </div>
                    </div>
                </form>
            </div>
        </section>
       </div>
   </div>
 </div>