3
私はASP.NETを初めて使い、現在ASP.NET Core 2.0を使用しています。小さな画面で別のものの背後に隠れているブートストラップ行
私がしようとしているのは、2つのcol-md-6を含む行を表示し、col-md-12を含むもう1つの行です。
「通常の」ラップトップ画面では完全に機能しますが、応答性をテストするために画面サイズを小さくすると、2番目の行が最初の行の後ろに表示されます。
ノートパソコンの画面：
小画面：ここ
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>
これを解決する方法はありますか？ ありがとう！
EDITは：ここ_Layout.cshtmlはあなたのグリッドにrow-fluidを使用していたときにそれは完璧に働いて
<!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>
'.row' CSSに 'width/margin'プロパティを明示的に指定する必要はありません。また、行divにclearfixクラスを追加してください –
@SuperUserこのクイック回答ありがとう！なぜマージンと幅を0に設定しないでください。とにかく、私はそれをしましたが、私の主な問題は残っています – Swurderer
それはコンテナの中ですか？ – Salketer