Как получить такой макет в .cshtml

Question

Привет,

Как получить макет, как на картинке? Когда я раскрою элемент управления Accordion с правой стороны, левая боковая панель не должна меняться. Пожалуйста, помогите. Спасибо!

Answer 1

Используйте legend и fieldset тег с формой.

Используйте .row класс в качестве родительского класса col-6 и добавьте в него тег формы.

Посетите для получения дополнительной информации информация https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset

Пример

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="row">
    <div class="col-6">
        <form>
           <fieldset class="border p-2">
              <legend class="w-auto">Personalia:</legend>
              <label for="fname">First name:</label>
              <input type="text" id="fname" name="fname"><br><br>
              <label for="lname">Last name:</label>
              <input type="text" id="lname" name="lname"><br><br>
          </fieldset>
      </form>
  </div>
  <div class="col-6">
        <form>
           <fieldset class="border p-2">
              <legend class="w-auto">Personalia:</legend>
              <label for="fname">First name:</label>
              <input type="text" id="fname" name="fname"><br><br>
              <label for="lname">Last name:</label>
              <input type="text" id="lname" name="lname"><br><br>
          </fieldset>
      </form>
  </div>
</div>

Answer 2

Для левой боковой панели я попробовал это, и это работает.

<!--First row starts here-->
<div class="row" style="padding-bottom:8px;margin-left:-350px;font-family:arial;font-size:15px;">
    <div class="col-sm-2 required;">
        <label>
            col 1
        </label>
    </div>
    <div class="col-md-4 required">
        @Html.TextBoxFor(c => c.FormCode, new { id = "formcode", @class = "txtboxclass1" })
    </div>
 </div>
 <!--First row ends here-->                                                                                                                 

Как правильно выровнять столбцы Expand 1 и Expand 2? Я попытался изменить приведенный выше код, как показано ниже, но когда я нажимаю кнопку «Развернуть», он заставляет левые элементы управления перейти вниз

<!--First row starts here-->
<div class="row" style="padding-bottom:8px;margin-left:-350px;font-family:arial;font-size:15px;">
    <div class="col-sm-2 required;">
        <label>
            col 1
        </label>
    </div>
    <div class="col-md-4 required">
        @Html.TextBoxFor(c => c.FormCode, new { id = "formcode", @class = "txtboxclass1" })
    </div>

    <div id="dvAccordian">
        <div class="col-sm-2 required">
            <a href="#">Template Code</a>
        </div>
        <div class="col-md-4 required">
            <aClick Here</a>
        </div>
    </div>
</div>
<!--First row ends here-->