文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >将用于输入注释的文本区域列移至与表单中其他列相同的列位置

问将用于输入注释的文本区域列移至与表单中其他列相同的列位置
EN

Stack Overflow用户
提问于 2020-06-14 18:53:16
回答 2查看 34关注 0票数 1

我有一个表单，每行有两列，最后在单行中有一列，用于使用文本区输入注释。我正在尝试用与其他列相同的列位置索引来启动文本区列。但是文本区将不会显示与其他列相同的列索引。请帮帮忙。我已经在这里附加了图像和我的代码在这里

​

代码语言：javascript
复制
<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>

​

asp.net-core
html
forms
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-06-14 19:36:44

您需要更改代码中的列分布。我已经上传，检查代码中的更改只为文本区。

​

代码语言：javascript
复制
<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
   </head>
   <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">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-6">
         <div class="form-group row">
            <label for="Comment" class="control-label col-3 col-form-label">Comment</label>
            <div class="col-9">
               <textarea asp-for="Comment" class="form-control"></textarea>
            </div>
         </div>
      </div>
   </div>

​

票数 0
EN

Stack Overflow用户

发布于 2020-06-15 14:39:30

col-md-6中的col-3等于col-md-12中的col-1.5。您可以自定义col-1.5和col-10.5，如下所示：

​

代码语言：javascript
复制
<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>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/62371504

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档