Html Divs 没有响应

【问题标题】：Html Divs aren't responsiveHtml Divs 没有响应
【发布时间】：2018-04-11 13:15:26
【问题描述】： 

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

所以，我正在研究这个视图，而且我是 css/html 的新手。这里的问题是这些 div 没有响应，所以当我更改浏览器宽度时，这些 div 保持在固定位置，而不是在另一个下响应。我会应用每一个帮助。所以，我正在研究这个视图，我是新手到 css/html 。这里的问题是这些 div 没有响应，所以当我更改浏览器宽度时，这些 div 保持在固定位置，而不是在另一个下响应。我会应用每一个帮助。

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

【问题讨论】：

  • 欢迎来到 Stack Overflow，您的问题应包含a Minimal, Complete, and Verifiable example。
  • 使用 % 值设置宽度/高度，例如 50%，您将看到它们在浏览器中重新调整大小。
  • 我做了，但还是一样

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


【解决方案1】：

假设您正在使用引导程序，您的列应该包含在 .row 中，而 .row 应该包含在 .container 中。然后容器将根据视口调整大小，并且列将按容器的百分比调整大小。

例如

<div class="container">
  <div class="row">
    <div class="col-md-6">Col 1</div>
    <div class="col-md-6">Col 2</div>
  </div>
</div>

更多信息在这里：Bootstrap Grid System

【讨论】：

  • 我没有给你投反对票，这是我在这里的第一天，我仍然不知道如何使用整个界面..没关系！我添加了容器和行类但仍然相同，请查看下面的编辑帖子。
  • 您需要指定不同的col-* 类来指定您希望事物在不同显示尺寸上的大小。例如。 .col-md-6 在中等屏幕上将是 50% 的宽度，但如果没有指定 .col-sm-* 或 .col-xs-* 类，则会在较小的屏幕上更改为 100% 的宽度。您可以发布修改后的代码吗？。
  • 我明白这一点，但这不是我第一次在 ASP.NET MVC 中使用带有 CRUD 的引导程序。当我调整浏览器宽度时它应该调整大小，但它所做的只是让 div 一个接一个。
  • 原始帖子中显示的代码没有正确的.container 和.row div，因此不会响应。请尝试上面给出的示例，或阅读 Bootstrap 文档
猜你喜欢
  • 2017-03-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode