Question

我是ASP.NET新手，我目前正在使用ASP.NET Core 2.0，所以我的问题可能来自于此，只是让你知道。

所以，我正在尝试做的很简单，显示一行包括2 col-md-6，另一行包括col-md-12。

这适用于“普通”笔记本电脑屏幕，但当我减小屏幕尺寸以测试响应性时，第二行显示在第一行后面，并在其中间。

笔记本电脑屏幕：

小屏幕：

这里有CSS：

body {
padding-top: 50px;
padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}

/* Custom changes */
body {background-color:grey;}

.form {
background-color: green;
height: 66vh;
}

.form form {
height: 100%;
}

#inputs {
height: 90%;
width: 100%;
margin: 0;
padding: 0;
}

.col-md-6 {
padding-top: 2%;
padding-bottom: 3%;
text-align: center;
background-color:orange;
height: 100%;
}

.textbox {
width: 66%;
height: 90%;
background-color: red;
resize: none;
}

#submit {
text-align: center;
background-color: pink;
height: 48px;
padding: 0;
margin: 0;
}

.errors {
background-color: aqua;
}

和HTML：

@page
@model IndexModel
@{
ViewData["Title"] = "Home page";
}

@{
string message = "";
string phones = "";
int error_nb = 0;
int error_line = 0;

if (Request.Method == "POST")
{
    message = Request.Form["message"];
    phones = Request.Form["phones"];
    }
}



<div class="form">
<form method="post">
    <div class="row" id="inputs">
        <div class="col-md-6">
            Message:<br />
            <textarea type="text" name="message" class="textbox">@message</textarea>
        </div>
        <div class="col-md-6">
            Phones:<br />
            <textarea type="text" name="phones" class="textbox">@phones</textarea>
        </div>
    </div>
    <div class="row" id="submit">
        <div class="col-md-12">
            <input type="submit" name="submit" class="btn btn-lg btn-success" />
        </div>
    </div>
</form>
</div>
<div class="errors">
<textarea>@error_nb error(s) detected at line @error_line !</textarea>
</div>

有什么想法解决这个问题吗？谢谢！

编辑：这是_Layout.cshtml文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication6</title>

<environment include="Development">
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
          asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
          asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<body>

<div class="container body-content">
    @RenderBody()
</div>

<environment include="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery"
            crossorigin="anonymous"
            integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
            asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
            asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
            crossorigin="anonymous"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
    </script>
    <script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>

@RenderSection("Scripts", required: false)
</body>
</html>

Answer 1

问题在于，在较低的屏幕分辨率下，您没有设置列...您应该始终至少定义一个col-xs- *，我添加了col-xs-12并且它可以工作。

CSS here: body {
  padding-top: 50px;
  padding-bottom: 20px;
}


/* Wrapping element */


/* Set some basic padding to keep content from hitting the edges */

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}


/* Custom changes */

body {
  background-color: grey;
}

.form {
  background-color: green;
  height: 66vh;
}

.form form {
  height: 100%;
}

#inputs {
  height: 90%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.col-md-6 {
  padding-top: 2%;
  padding-bottom: 3%;
  text-align: center;
  background-color: orange;
  height: 100%;
}

.textbox {
  width: 66%;
  height: 90%;
  background-color: red;
  resize: none;
}

#submit {
  text-align: center;
  background-color: pink;
  height: 48px;
  padding: 0;
  margin: 0;
}

.errors {
  background-color: aqua;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form container">
  <form method="post">
    <div class="row" id="inputs">
      <div class="col-md-6 col-xs-12">
        Message:<br />
        <textarea type="text" name="message" class="textbox">@message</textarea>
      </div>
      <div class="col-md-6 col-xs-12">
        Phones:<br />
        <textarea type="text" name="phones" class="textbox">@phones</textarea>
      </div>
    </div>
    <div class="row" id="submit">
      <div class="col-xs-12">
        <input type="submit" name="submit" class="btn btn-lg btn-success" />
      </div>
    </div>
  </form>
</div>
<div class="errors">
  <textarea>@error_nb error(s) detected at line @error_line !</textarea>
</div>

不幸的是，文档中没有正确记录，但是如果没有XS值的列将产生不可预测的结果。请注意，在您的情况下，缺少CSS规则float:left，因为只有col-xs- *应用它。

Answer 2

当您在网格中使用row-fluid时，它的工作正常，建议使用row-fluid来获得更好的响应案例。

Ref link.

对于响应问题，我已经为您添加了此代码 -

@media only screen and (max-width: 767px) {
  #inputs {
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
  }

}

＆＃13;

body {
  padding-top: 50px;
  padding-bottom: 20px;
}


/* Wrapping element */


/* Set some basic padding to keep content from hitting the edges */

.body-content {
  padding-left: 15px;
  padding-right: 15px;
}


/* Custom changes */

body {
  background-color: grey;
}

.form {
  background-color: green;
  height: 66vh;
}

.form form {
  height: 100%;
}

#inputs {
  height: 90%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.col-md-6 {
  padding-top: 2%;
  padding-bottom: 3%;
  text-align: center;
  background-color: orange;
  height: 100%;
}

.textbox {
  width: 66%;
  height: 90%;
  background-color: red;
  resize: none;
}

#submit {
  text-align: center;
  background-color: pink;
  height: 48px;
  padding: 0;
  margin: 0;
}

.errors {
  background-color: aqua;
}

@media only screen and (max-width: 767px) {
  #inputs {
    height: auto;
    width: auto;
    margin: 0;
    padding: 0;
  }

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="form">
  <form method="post">
    <div class="row-fluid" id="inputs">
      <div class="col-md-6">
        Message:<br />
        <textarea type="text" name="message" class="textbox">@message</textarea>
      </div>
      <div class="col-md-6">
        Phones:<br />
        <textarea type="text" name="phones" class="textbox">@phones</textarea>
      </div>
    </div>
    <div class="row-fluid" id="submit">
      <div class="col-md-12">
        <input type="submit" name="submit" class="btn btn-lg btn-success" />
      </div>
    </div>
  </form>
</div>

＆＃13;

Bootstrap行隐藏在小屏幕上的另一个后面

2 个答案: