gpt4 book ai didi

javascript - Twitter Bootstrap 动态表单输入在网格中对齐

转载 作者:行者123 更新时间:2023-11-28 02:11:23 25 4
gpt4 key购买 nike

我对 Bootstrap 比较陌生,想知道如何将网格系统合并到我的 Web 应用程序中。问题是我的整个表单根据用户选择的选项动态加载,进行 ajax 调用并从数据库获取字段。因此,直到运行时我才知道可能到达的字段。我想构建一个屏幕,其中表单元素在 3 列 View 中展开,其中一列中溢出的输入字段将填充到下一列中。下图可能会更清晰:

Pic1: Current situation that is happening: 

enter image description here

Pic2: Next image shows what i want to achieve.

enter image description here

我刚刚了解到 Bootstrap 可以帮助组织网格系统中的输入字段。但无法看到我如何动态地实现这一点。欢迎任何指示或建议。

最佳答案

试试这个使用

添加控件
<div class="box span3">
//your conrol
</div>

添加控件后调用函数xyz()

 function xyz() {
$('.box').each(function () {
if ($(this).index() % 4 == 0) {
$(this).css({ 'clear': 'both', 'margin-left': '0' })
}
})
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head >
<title></title>
<link href="Styles/bootstrap.css" rel="stylesheet" type="text/css" />
<style>
.box
{
border: 1px solid red;
height: 100%;
}
</style>
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
xyz();
});
function xyz() {
$('.box').each(function () {
if ($(this).index() % 4 == 0) {
$(this).css({ 'clear': 'both', 'margin-left': '0' })
}
})
}
</script>

</head>

<body>
<div class="">
<div class="row-fluid" style="width: 96%; padding: 2%;">
<div class="box span3">
</div>
<div class="box span3">
</div>
<div class="box span3">
</div>
<div class="box span3">
</div>
<div class="box span3">
</div>
<div class="box span3">
</div>
<div class="box span3">
</div>
<div class="box span3">
</div>
<div class="box span3">
</div>
</div>
</div>

</body>

</html>

关于javascript - Twitter Bootstrap 动态表单输入在网格中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17037638/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com