Question

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

Pic1: Current situation that is happening:

enter image description here

Pic2: Next image shows what i want to achieve.

enter image description here

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

Answer 1

试试这个使用

添加控件

<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>

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

1 个答案: