如何在 .cshtml 中获得这样的布局答案

【问题标题】：How to get a layout like this in .cshtml如何在 .cshtml 中获得这样的布局
【发布时间】：2020-08-05 22:07:34
【问题描述】：

嗨，

如何获得如图所示的布局？当我在右侧展开 Accordion 控件时，左侧面板不应该改变。请帮助。谢谢！

【问题讨论】：

标签： html css .net twitter-bootstrap model-view-controller

【解决方案1】：

在表单中使用legend 和fieldset 标记。

使用.row类作为col-6的父类并在其中添加表单标签。

示例

<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>

【讨论】：

谢谢。将尝试 fieldset 标签。

【解决方案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-->

【讨论】：