如何在我的表格中划分两列？

时间：2015-10-02 05:01:11

标签： asp.net-mvc-4

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

我的代码：

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

2 个答案:

答案 0 :(得分：1)

为什么不使用MVC附带的Bootstrap？

您可以在http://getbootstrap.com/css/

上查看示例

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

<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-lg-6表示在行中可用的12个单元中，您使用的是6，如果显示;如果设备没有大显示，则响应将启动，即列将显示为单个列。阅读它，它的伟大和有用。确保您的列总是加起来为“12”

答案 1 :(得分：1)

我找到了一些解决方案

<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>
相关问题
最新问题