时间戳

首页 > 解决方案 > 将用于输入注释的文本区域列带到表单中其他列的相同列位置

html - 将用于输入注释的文本区域列带到表单中其他列的相同列位置

问题描述

我有一个表格，每行有两列，最后是单行的单列，用于使用文本区域输入评论。我正在尝试使用其他列的相同列位置索引开始文本区域列。但是文本区域不会显示其他列的相同列索引。请帮忙。我在这里附上了图片，还有我的代码

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <div class="row">
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputName" class="control-label  col-3 col-form-label">Make</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="Make" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group form-group-sm row">
                <label for="inputName" class="control-label col-3 col-form-label">Model</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="Model" />
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group  row">
                <label for="inputName" class="control-label  col-3 col-form-label">Reg.No</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="RegNo" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group  row">
                <label for="inputName" class="control-label col-3 col-form-label">Description</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="VehicleName" />
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group  row">
                <label for="MOTDate" class="control-label  col-3 col-form-label">MOT Date</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="MOTDate" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="TaxDate" class="control-label col-3 col-form-label">Tax Date</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="TaxDate" />
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group row">
                <label for="InsuredDate" class="control-label col-3 col-form-label">Date insured</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="InsuredDate" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="RegDate" class="control-label col-3 col-form-label">Reg Date</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="RegDate" />
                </div>
            </div>

        </div>
    </div>
     

    <div class="row">
        <div class="col-md-12">
            <div class="form-group row">
                <label for="Comment" class="control-label col-2 col-form-label">Comment</label>
                <div class="col-10">
                    <textarea asp-for="Comment" class="form-control"></textarea>
                </div>
            </div>
        </div>
      
    </div>

标签： htmlformsasp.net-core

解决方案

col-3incol-md-6等于col-1.5in col-md-12。您可以自定义col-1.5如下col-10.5：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
    .custom-label-col {
        width: 12.5%;
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }

    .custom-area-col {
        width: 87.5%;
        flex: 0 0 87.5%;
        max-width: 87.5%;
    }
</style>

 <div class="row">
        <div class="col-md-6">
            <div class="form-group row">
                <label for="inputName" class="control-label  col-3 col-form-label">Make</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="Make" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group form-group-sm row">
                <label for="inputName" class="control-label col-3 col-form-label">Model</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="Model" />
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group  row">
                <label for="inputName" class="control-label  col-3 col-form-label">Reg.No</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="RegNo" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group  row">
                <label for="inputName" class="control-label col-3 col-form-label">Description</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="VehicleName" />
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group  row">
                <label for="MOTDate" class="control-label  col-3 col-form-label">MOT Date</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="MOTDate" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="TaxDate" class="control-label col-3 col-form-label">Tax Date</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="TaxDate" />
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group row">
                <label for="InsuredDate" class="control-label col-3 col-form-label">Date insured</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="InsuredDate" />
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group row">
                <label for="RegDate" class="control-label col-3 col-form-label">Reg Date</label>
                <div class="col-9">
                    <input class="form-control input-sm" type="text" id="inputName"
                           asp-for="RegDate" />
                </div>
            </div>

        </div>
    </div>
     

    <div class="row">
        <div class="col-md-12">
            <div class="form-group row">
                <label for="Comment" class="control-label col custom-label-col col-form-label">Comment</label>
                <div class="col custom-area-col">
                    <textarea asp-for="Comment" class="form-control"></textarea>
                </div>
            </div>
        </div>
      
    </div>

推荐阅读