个人中心
gpt4 book ai didi

html - Bootstrap 行在小屏幕上隐藏在另一行后面

转载 作者：搜寻专家 更新时间：2023-10-31 23:19:09 24 4
gpt4 key购买 nike

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

所以，我要做的很简单，显示包含 2 col-md-6 的一行，以及包含 col-md-12 的另一行。

这在“普通”笔记本电脑屏幕上完美运行，但当我缩小屏幕尺寸以测试响应能力时，第二行显示在第一行的后面，并位于其中心。

笔记本电脑屏幕:

Laptop screen

小屏幕:

Small screen

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>

最佳答案

问题是在较低的屏幕分辨率下，您没有设置列...您应该始终在这里至少定义一个 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-* 应用它。

关于html - Bootstrap 行在小屏幕上隐藏在另一行后面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46642472/

24 4 0
文章推荐： php - filter_var 和 filter_input 之间的区别
文章推荐： javascript - 这个例子中的 fn 是什么？
文章推荐： php - 在 foreach 中对数组中的项目进行分组和求和
文章推荐： python - 如何安装 node-waf？
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com