Ядро asp.net загружает две колонки используя post

Question

У меня очень простая форма, которую я использую для теста / обучения.Я позволил VS создать его с помощью Scaffold New Razor Page.

Затем я изменил его, пытаясь получить два столбца для страницы создания.Я перепробовал много вещей, но безуспешно.Последняя версия с CSS и Flexbox.

Что в мире мне не хватает?Нижеследующее работает, то есть оно отправляет и обновляет базу данных, но все по-прежнему находится в одном столбце.

    style>
    * {
        box-sizing: border-box;
    }

    .row {
        display: flex;
    }

    /* Create two equal columns that sits next to each other */
    .column {
        flex: 50%;
        padding: 10px;
        height: 300px; /* Should be removed. Only for demonstration */
    }
</style>

<h2>Create</h2>

<div class="row">
    <form method="post">
        <div class="column" style="background-color:#aaa;">
            <h2>Column 1</h2>
            <p>Some text..</p>
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="RebateDetail.RebateProgramId" class="control-label"></label>
                <select asp-for="RebateDetail.RebateProgramId" class="form-control" asp-items="ViewBag.RebateProgramId"></select>
            </div>
            <div class="form-group">
                <label asp-for="RebateDetail.RetailerId" class="control-label"></label>
                <select asp-for="RebateDetail.RetailerId" class="form-control" asp-items="ViewBag.RetailerId"></select>
            </div>
        </div>
        <div class="column" style="background-color:#bbb;">
            <h2>Column 2</h2>
            <p>Some text..</p>
            <div class="form-group">
                <label asp-for="RebateDetail.FirstName" class="control-label"></label>
                <input asp-for="RebateDetail.FirstName" class="form-control" />
                <span asp-validation-for="RebateDetail.FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="RebateDetail.LastName" class="control-label"></label>
                <input asp-for="RebateDetail.LastName" class="form-control" />
                <span asp-validation-for="RebateDetail.LastName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create Simple" class="btn btn-default" />
            </div>
        </div>
    </form>
</div>

ОБНОВЛЕНИЕ: Я переместил форму вверх и также понял, что не использую BS4.Это работает, пока я собираюсь пройтись по некоторым учебникам по обновлению до BS4.

 /* Create two equal columns that sits next to each other */
    .inputColumns {
        flex: 50%;
        padding: 70px;
        background-color:bisque;
          }
</style>

<h2>Create</h2>
<form method="post">
    <div class="row">

        <div class="inputColumns" style="background-color:darkgray;">
            <h2>Rebate Details</h2>
            <p>This section is for the rebate amounts and info</p>
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="RebateDetail.RebateProgramId"> Rebate Program ID</label>
                <select asp-for="RebateDetail.RebateProgramId" class="form-control" asp-items="ViewBag.RebateProgramId"></select>
            </div>
            <div class="form-group">
                <label asp-for="RebateDetail.RetailerId" class="control-label"></label>
                <select asp-for="RebateDetail.RetailerId" class="form-control" asp-items="ViewBag.RetailerId"></select>
            </div>

Answer 1

что такое стиль столбца?это должно быть col или col-<modifier> (см, мд, lg) или вы можете col-<modifier>-<number> например col-md-4, максимальное число может быть 12

Имейте в виду, что asp.net core шаблоныв настоящее время не ссылается на bootstrap 4.Вам придется вручную обновить стиль, чтобы он ссылался на bootstrap 4.

. В вашем случае вам может понадобиться что-то вроде

<div class="row">
  <div class="col-6">
     <!--- column 1 ---->
     <div class="form-group">
     </div>
  </div
  <div class="col-6">
     <!--- column 2 ---->
      <div class="form-group">
     </div>
  </div>
 </div>

, то, что вы делаете, не помогает с дополнительными селекторами, если у вас естьфайлы, на которые ссылаются правильно для начальной загрузкиВы с помощью чего-то уже написали не переписывая колесо.

http://getbootstrap.com/docs/4.1/layout/grid/