javascript - 为内联表单定义特定的字段宽度以适合所有内容
问题描述
我用 bootstrap 4 和 javascript 创建了一个动态内联表单。在桌面/笔记本电脑浏览器中查看时，我想将所有字段放在一行中。在移动视图中，我想将所有字段堆叠在另一个下方，并且它们的宽度应该相等。
我尝试了引导网格列布局，还尝试修复每个字段的宽度，但它似乎不起作用。请帮忙。
HTML 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="input-group">
<div class="form-group p-2">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<button class="btn btn-success" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>
下面提供了javascript代码：
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="input-group"><div class="form-group p-2"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div><button class="btn btn-danger" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}
我无法在桌面视图中将所有字段放在一行中。我希望我的内联表单也能够响应移动设备。请指教。
解决方案
请参阅我在您的代码中更改了一些内容。我所做的只是col-sm为 div 类添加。您可以通过此链接找到有关引导网格系统的更多信息。 引导网格系统。请仔细阅读代码，因为我已从您的原始代码中删除了一些代码。我想你期待这个。要查看结果，请展开代码段，然后在浏览器中使用 Inspect Element，然后导航到移动视图。谢谢
桌面视图
移动视图
var room = 1;
function fields() {
room++;
var objTo = document.getElementById('inside-container')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
divtest.innerHTML = '<div class="form-group p-2 col-sm-3"> <input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160"></div><div class="form-group p-2 col-sm-2"><input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*"></div><div class="form-group p-2 col-sm-2"><input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01"></div><div class="form-group p-2 col-sm-2"><select class="form-control" id="recurrence" name="recurrence[]"><option value="0">Once</option><option value="7">Weekly</option><option value="30">Monthly</option><option value="90">Quarterly</option><option value="365">Yearly</option></select></div><div class="form-group p-2 col-sm-1"><select class="form-control" id="profile" name="profile[]"><option value="1">A</option><option value="2">B</option></select></div> <div class="form-group p-2 col-sm-1"><button class="btn btn-danger btn-lg btn-block" type="button" onclick="remove_fields('+ room +');"><span>-</span></button></div><div class="clear col-sm-1"></div>';
objTo.appendChild(divtest)
}
function remove_fields(rid) {
$('.removeclass'+rid).remove();
}<!DOCTYPE html>
<html lang="en">
<head>
<title>TEST PAGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="TEST">
<meta name="author" content="TEST">
<!-- <link rel="icon" href="/docs/4.0/assets/img/favicons/favicon.ico"> -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
</head>
<body>
<header>
</header>
<!-- Begin page content -->
<main role="main" class="container">
<div class="container">
<h3>EXAM SCHEDULE</h3><br>
<form class="form-inline" id="fields" method="post" enctype="multipart/form-data">
<div id="inside-container"></div>
<div class="form-group p-2 col-sm-3">
<input type="text" class="form-control" id="status" name="status[]" value="" placeholder="Text message" maxlength="160">
</div>
<div class="form-group p-2 col-sm-2">
<input type="file" id="media" name="media[]" value="" placeholder="Media" accept="image/*|video/*">
</div>
<div class="form-group p-2 col-sm-2">
<input type="date" class="form-control" id="datesched" name="datesched[]" value="" placeholder="Scheduled Date" max="2100-12-31" min="2019-11-01">
</div>
<div class="form-group p-2 col-sm-2">
<select class="form-control" id="recurrence" name="recurrence[]">
<option value="0">Once</option>
<option value="7">Weekly</option>
<option value="30">Monthly</option>
<option value="90">Quarterly</option>
<option value="365">Yearly</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<select class="form-control" id="profile" name="profile[]">
<option value="1">A</option>
<option value="2">B</option>
</select>
</div>
<div class="form-group p-2 col-sm-1">
<button class="btn btn-success btn-lg btn-block" type="button" onclick="fields();"><span>+</span></button>
</div>
</form>
</div>
<script src="dynamicform.js"></script>
</main>
</body>
</html>推荐阅读
- c# - C# WinForm DataGridView 单元格剪切区域
- java - 使 JPQL/QueryDSL 不会产生可怕的查询
- flutter - 颤振主题未应用于新屏幕
- c# - LINQ to Entities 仅支持无参数构造函数和初始化程序：Linq
- python - 在尊重重复排序键的相对顺序位置的同时在 Python 中对列表进行排序？
- python - 根据条件在 loc 中动态获取列
- django - 使用 Sphinxsearch 运行的 Django 引导表上的“未知参数”错误
- r - 如何随着时间的推移为传单（）地图制作动画，而不仅仅是显示最新时间戳的颜色/数据
- swift - 带有 Swift 5.5 的 Xcode 13.0 将不再使用“import CreateML”语句构建我的项目，如何解决？
- python - pyodbc.OperationalError: ('HYT00', '[HYT00] [Microsoft][ODBC Driver 17 for SQL Server]登录超时已过期 (0) (SQLDriverConnect)')