Html Divs没有响应

时间:2017-10-30 14:06:03

标签: html css html5 asp.net-mvc-5 responsive-design



   <div class="container">
        <div class="row">


            @using (Html.BeginForm())
            {
                @Html.AntiForgeryToken()



                <div class="col-md-6 active" id="main-content" style="border: 0.5px solid rgba(4,4,4,.4)  ;box-shadow: 5px  5px 5px #99ccff;  border-radius: 5px; margin-right:10px;float:left;width: 58%; height:40%;margin-left:-10%;">



                    <div class="form-horizontal">
                        <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h3>
                        <hr />
                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                        <div class="form-group">
                            @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-4 " })


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

                                @Html.EditorFor(model => model.Id, new { htmlAttributes = new { id = "x", @class = "form-control" } })


                                @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })


                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.Email, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            <div>
                                @Html.LabelFor(model => model.EmailConfirmed, htmlAttributes: new { @class = "control-label col-md-4" })
                                <div class="col-md-6">
                                    <div class="checkbox">
                                        @Html.EditorFor(model => model.EmailConfirmed)
                                        @Html.ValidationMessageFor(model => model.EmailConfirmed, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>
                        </div>





                        <div class="form-group">
                            @Html.LabelFor(model => model.PasswordHash, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.PasswordHash, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.PasswordHash, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.SecurityStamp, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.SecurityStamp, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.SecurityStamp, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                                @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(model => model.PhoneNumberConfirmed, htmlAttributes: new { @class = "control-label col-md-5" })
                            <div class="col-md-5">
                                <div class="checkbox">
                                    @Html.EditorFor(model => model.PhoneNumberConfirmed)
                                    @Html.ValidationMessageFor(model => model.PhoneNumberConfirmed, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>




                    </div>

                </div>








                <div class="col-md-6 active" id="sidebar-right" style="border: 0.5px solid  rgba(4,4,4,.4);
    box-shadow: 5px  5px 5px  #99ccff;border-radius: 5px; margin-bottom:11%;float:right   ; margin-right:-10%; width: 58%; height:200px ;margin-left:1%; position:relative;">




                    <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h3>

                    <hr />


                    <div class="form-group">
                        @Html.LabelFor(model => model.TwoFactorEnabled, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">
                            <div class="checkbox">
                                @Html.EditorFor(model => model.TwoFactorEnabled)
                                @Html.ValidationMessageFor(model => model.TwoFactorEnabled, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.LockoutEndDateUtc, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.LockoutEndDateUtc, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.LockoutEndDateUtc, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>






















                <div class="col-md-6 active" style="border: 0.5px solid  rgba(4,4,4,.4);
    box-shadow: 5px  5px 5px  #99ccff;border-radius: 5px; margin-top:-20%;float:right ;margin-right:-10%; width: 58%; height:100%;margin-left:5%; position:relative;">

                    <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px; color:black">Title</h3>
                    <hr />


                    <div class="form-group">
                        @Html.LabelFor(model => model.LockoutEnabled, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">
                            <div class="checkbox">
                                @Html.EditorFor(model => model.LockoutEnabled)
                                @Html.ValidationMessageFor(model => model.LockoutEnabled, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.AccessFailedCount, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.AccessFailedCount, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.AccessFailedCount, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">

                            @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                            &nbsp;
                            @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>



                <div class="btn-toolbar" style="float:left;">
                    <br />
                    <input type="reset" value="Create" class="btn btn-primary" id="btnSubmit" />



                    <button type="button" class="btn">Basic</button>
                    <button type="button" class="btn btn-default">Default</button>
                    <button type="button" class="btn btn-primary">Primary</button>
                    <button type="button" class="btn btn-success">Success</button>
                    <button type="button" class="btn btn-info">Info</button>
                    <button type="button" class="btn btn-warning">Warning</button>
                    <button type="button" class="btn btn-danger">Danger</button>

                </div>
















            }




        </div>
        </div>
&#13;
&#13;
&#13;

enter image description here

所以,我正在研究这个观点,我刚接触到css / html。这里的问题是这些div不响应,所以当我改变浏览器宽度时,这些div保持在固定位置而不是在另一个下面响应.i会对每个帮助都有所帮助。所以,我正在研究这个视图,我是新手到css / html。这里的问题是这些div不响应,所以当我改变浏览器宽度时,这些div保持在固定位置而不是在另一个之下响应.i会对每一个帮助都有所帮助。

&#13;
&#13;
 <div style="display:block">


        @using (Html.BeginForm())
        {
            @Html.AntiForgeryToken()



            <div class="col-md-6 active" style="border: 0.5px solid  ;box-shadow: 5px  5px 5px #99ccff;  border-radius: 5px;margin-right:10px;float:left;width: 55%; height:40%;margin-left:-10%;">



                <div class="form-horizontal">
                    <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h3>
                    <hr />
                    @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                    <div class="form-group">
                        @Html.LabelFor(model => model.Id, htmlAttributes: new { @class = "control-label col-md-4 " })


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

                            @Html.EditorFor(model => model.Id, new { htmlAttributes = new { id = "x", @class = "form-control" } })


                            @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })


                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        <div>
                            @Html.LabelFor(model => model.EmailConfirmed, htmlAttributes: new { @class = "control-label col-md-4" })
                            <div class="col-md-6">
                                <div class="checkbox">
                                    @Html.EditorFor(model => model.EmailConfirmed)
                                    @Html.ValidationMessageFor(model => model.EmailConfirmed, "", new { @class = "text-danger" })
                                </div>
                            </div>
                        </div>
                    </div>





                    <div class="form-group">
                        @Html.LabelFor(model => model.PasswordHash, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.PasswordHash, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.PasswordHash, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.SecurityStamp, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.SecurityStamp, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.SecurityStamp, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.PhoneNumber, htmlAttributes: new { @class = "control-label col-md-4" })
                        <div class="col-md-6">
                            @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                            @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })
                        </div>
                    </div>

                    <div class="form-group">
                        @Html.LabelFor(model => model.PhoneNumberConfirmed, htmlAttributes: new { @class = "control-label col-md-5" })
                        <div class="col-md-5">
                            <div class="checkbox">
                                @Html.EditorFor(model => model.PhoneNumberConfirmed)
                                @Html.ValidationMessageFor(model => model.PhoneNumberConfirmed, "", new { @class = "text-danger" })
                            </div>
                        </div>
                    </div>




                </div>

            </div>








            <div class="col-md-6 active" style="border: 0.5px solid  ;
    box-shadow: 5px  5px 5px  #99ccff;border-radius: 5px; margin-bottom:10%;float:right ;margin-right:-5%; width: 55%; height:1
    00%;margin-left:1%; position:relative;">




                <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px;color:black">Title</h3>

                <hr />


                <div class="form-group">
                    @Html.LabelFor(model => model.TwoFactorEnabled, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-6">
                        <div class="checkbox">
                            @Html.EditorFor(model => model.TwoFactorEnabled)
                            @Html.ValidationMessageFor(model => model.TwoFactorEnabled, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.LockoutEndDateUtc, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-6">
                        @Html.EditorFor(model => model.LockoutEndDateUtc, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.LockoutEndDateUtc, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>






















            <div class="col-md-6 active" style="border: 0.5px solid  ;
    box-shadow: 5px  5px 5px  #99ccff;border-radius: 5px; margin-top:-20%;float:right ;margin-right:-5%; width: 55%; height:100%;margin-left:5%; position:relative;">

                <h3 style="text-align:center; border-radius:5px;margin:5px;padding:15px; color:black">Title</h3>
                <hr />


                <div class="form-group">
                    @Html.LabelFor(model => model.LockoutEnabled, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-6">
                        <div class="checkbox">
                            @Html.EditorFor(model => model.LockoutEnabled)
                            @Html.ValidationMessageFor(model => model.LockoutEnabled, "", new { @class = "text-danger" })
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.AccessFailedCount, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-6">
                        @Html.EditorFor(model => model.AccessFailedCount, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.AccessFailedCount, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-4" })
                    <div class="col-md-6">

                        @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { id = "x", @class = "form-control" } })
                        &nbsp;
                        @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
                    </div>
                </div>
            </div>



            <div class="btn-toolbar" style="float:left;">
                <br />
                <input type="reset" value="Create" class="btn btn-primary" id="btnSubmit" />



                <button type="button" class="btn">Basic</button>
                <button type="button" class="btn btn-default">Default</button>
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-danger">Danger</button>

            </div>
















        }




    </div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

假设您使用的是bootstrap,那么您的列应包含在@Entity @Table(name = "agent") @Inheritance(strategy = InheritanceType.JOINED) public class Agent { @Id @GeneratedValue(strategy = GenerationType.AUTO) protected Integer id; @Column(name = "fistname", nullable = false) protected String fistname; @Column(name = "name", nullable = false) protected String name; } @Entity @Table(name="user") public User { @Id @GeneratedValue(strategy = GenerationType.AUTO) protected Integer id; @OneToOne @JoinColumn(name = "id_agent",nullable = false) protected Agent agent; @Column(name = "login", nullable = false, unique = true) private String login; @Column(name = "password", nullable = false) private String password; 中,该列应包含在.row中。然后,容器将根据视口调整大小,列的大小将为容器的%。

E.g

.container

此处有更多信息:Bootstrap Grid System