文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何在我的表单中划分两列？

问如何在我的表单中划分两列？
EN

Stack Overflow用户
提问于 2015-10-02 13:01:11
回答 2查看 1.6K关注 0票数 1

我正在MVC项目中进行开发。我想将表单的输入区域放在两列中。我该怎么做呢？我是这样做的，但我认为这不是正确的方法。

我的代码：

代码语言：javascript
复制
@using (Html.BeginForm("Save", "Company"))
{
    <div id="t00" style="position:relative;">
        <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;">
            <b>Company Code</b>
        </div>
        <div class="col-md-6">
            @Html.TextBoxFor(a => a.CompanyCode, new { @maxlength = "5", Class = "form-control", placeholder = " Company Code", style = "width:175px;height:25px;" })
            @Html.ValidationMessageFor(a => a.CompanyCode)
        </div>
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>

    <div id="t01" style="position:relative;left:468px; top:-25px;">
        <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;">
            <b>Company Name </b>
        </div>
        <div class="col-md-6">
            @Html.TextBoxFor(a => a.CompanyName, new { @maxlength = "15", Class = "form-control", placeholder = " Company Name", style = "width:175px;height:25px;" })
            @Html.ValidationMessageFor(a => a.CompanyName)
        </div>
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>

    <div id="t02" style="position:relative;top:-22px; ">
        <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;">
            <b>Contact Person</b>
        </div>
        <div class="col-md-6">
            @Html.TextBoxFor(a => a.ContactPerson, new { @maxlength = "15", Class = "form-control", placeholder = " Contact Person", style = "width:175px;height:25px;" })
            @Html.ValidationMessageFor(a => a.ContactPerson)
        </div>
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>





            <div id="t04" style="position:relative;left:468px; top:-48px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Company Address</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.CompanyAddress, new { @maxlength = "100", Class = "form-control", placeholder = " Company Address", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.CompanyAddress)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>

            </div>
            <div id="t05" style="position:relative; top:-45px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Company Website</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.CompanyWebsite, new { @maxlength = "50", Class = "form-control", placeholder = "  Website", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.CompanyWebsite)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>

            </div>


            <div id="t06" style="position:relative;left:468px; top:-71px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Phone Number</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.Phone, new { @maxlength = "20", Class = "form-control", placeholder = " Phone Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.Phone)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>



            <div id="t07" style="position:relative; top:-68px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>TelePhone Number</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.TelNo, new { @maxlength = "20", Class = "form-control", placeholder = " TelePhone Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.TelNo)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>





            <div id="t08" style="position:relative;left:468px; top:-94px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Fax Number</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.FaxNo, new { @maxlength = "20", Class = "form-control", placeholder = " Fax Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.FaxNo)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>

            </div>
            <div id="t09" style="position:relative; top:-92px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Mobile Number</b> </div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.Mobile, new { @maxlength = "20", Class = "form-control", placeholder = " Mobile Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.Mobile)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>

            </div>


            <div id="t10" style="position:relative;left:468px; top:-117px;">

                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Email</b></div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.Email, new { @maxlength = "50", Class = "form-control", placeholder = " Email", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.Email)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>




            <div id="t11" style="position:relative;top:-115px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Vat Number</b></div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.VATNumber, new { @maxlength = "50", Class = "form-control", placeholder = " Vat Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.VATNumber)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>
            <div id="t12" style="position:relative;left:468px; top:-140px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>SVAT Number</b></div>
                <div class="col-md-6">
                    @Html.TextBoxFor(a => a.SVATNumber, new { @maxlength = "50", Class = "form-control", placeholder = " SVAT Number", style = "width:175px;height:25px;" })
                    @Html.ValidationMessageFor(a => a.SVATNumber)
                </div>

                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>

            <div id="t13" style="position:relative; top:-138px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Remarks</b> </div>
                <div class="col-md-6">@Html.TextAreaFor(a => a.Remarks, new { style = "width: 178px; height: 65px; resize: none;", Class = "form-control", })</div>
                <div class="col-md-6"></div>    <div class="col-md-6"></div>
            </div>
            <div id="t14" style="position:relative;left:468px; top:-200px;">
                <div class="col-md-6" style="font-family:Arial, Helvetica, sans-serif; font-size:13px;"><b>Status</b></div>
                <div class="col-md-6">@Html.CheckBoxFor(a => a.StatusId)</div>

                <div class="col-md-6"></div> <div class="col-md-6"></div>
            </div>

            <div id="t15" style="position:relative;left:580px; top:-198px;">
                <div class="col-md-6"></div>
                <div class="col-md-6">   <input type="submit" value="Save" class="btn btn-success" /> </div>
            </div>
        }
    </div>
asp.net-mvc-4
EN

回答 2

Stack Overflow用户

发布于 2015-10-02 13:26:26

为什么不使用MVC自带的Bootstrap呢？

您可以在http://getbootstrap.com/css/上查看示例

同时，下面是使用boostrap获取2列的方法

代码语言：javascript
复制
<div class="row">
   <div class="col-lg-6">Add whatever you want for COL 1</div>
   <div class="col-lg-6">Add whatever you want for COL 2</div>
</div>

注col 6意味着在行上可用的12个单元中，您使用的是6个，如果显示设备没有大显示器，则响应将启动，即列将显示为单个列。读一读它，它是伟大和有用的。确保您的列的总和始终为"12“

票数 1
EN

Stack Overflow用户

发布于 2015-10-02 13:53:22

我找到了一些解决方案

代码语言：javascript
复制
<form class="container">
    <div class="row">
        <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>

        <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
 <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div> <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
         <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div> <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
         <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
         <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div> <div class="col-md-3">
            <label for="username" class="control-label">label</label>
        </div>

        <div class="col-md-3">
            <input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
        </div>
    </div>
</form>
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/32900820

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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