1

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

Pic1: Current situation that is happening:

在此处输入图像描述

Pic2: Next image shows what i want to achieve.

在此处输入图像描述

我刚刚知道引导程序可以帮助组织网格系统中的输入字段。但无法看到我如何动态地实现这一点。欢迎任何相同的指示或建议。

4

1 回答 1

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>
于 2013-06-11T06:26:57.707 回答