Bootstrap行隐藏在小屏幕上的另一个后面
[英]Bootstrap row hiding behind another one on small screens
问题描述
我是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>
2 个解决方案
解决方案1
3 2017-10-09 09:18:02
问题是在较低的屏幕分辨率下，你没有设置列...你应该总是至少定义一个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- *应用它。
解决方案2
1 2017-10-09 09:17:22
当你在网格中使用row-fluid时，它工作得很好，建议使用row-fluid来获得更好的响应情况。
对于响应问题，我已经为您添加了此代码 -
@media only screen and (max-width: 767px) {
#inputs {
height: auto;
width: auto;
margin: 0;
padding: 0;
}
}
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; } }
<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>
一个Bootstrap行中的溢出文本隐藏在另一行的文本后面
[英]Overflowing text from one Bootstrap row hides behind text of another row
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.