0

我有一个 django 模板,我希望它呈现一个模型表单,但具有不同的列和行。更具体地说,我希望它们在让我们说一个三列的网格,最后一行将有剩余的(如果有的话)。我的模板正在渲染(它有点大,所以我用小提琴)下面的代码。但是当我看到不同的行时,我的表格仍然有一列。我错过了什么吗?

(我也必须在这里输入代码吗?)

<div id="personal-data">
    <form class="form-horizontal" action="/customer/edit/1/" method="post" enctype="multipart/form-data">
        <input type="hidden" value="KTN76otstgqNoyE7Whzn6L9TAC2jvR9u" name="csrfmiddlewaretoken"></input>
        <legend> Name </legend>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_first_name">

                        First name

                    </label>
                    <div id="form-first_name">
                        <input id="id_first_name" class="form-control" type="text" value="Name" name="first_name" maxlength="150"></input>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_last_name">

                        Last name

                    </label>   
                    <div id="form-last_name">
                        <input id="id_last_name" class="form-control" type="text" value="Name" name="last_name" maxlength="200"></input>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_email">

                        Email

                    </label>
                    <div id="form-email">
                        <input id="id_email" class="form-control" type="text" name="email" maxlength="200"></input>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_telephone">

                        Telephone

                    </label>
                    <div id="form-telephone">
                        <input id="id_telephone" class="form-control" type="text" value="(664) 654-6545" placeholder="(XXX) XXX-XXXX" name="telephone" maxlength="14" autocomplete="off"></input>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_mobile">

                        Mobile

                    </label>
                    <div id="form-mobile">
                        <input id="id_mobile" class="form-control" type="text" value="9999999999" name="mobile" maxlength="25"></input>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_street">

                        Street

                    </label>
                    <div id="form-street">
                        <input id="id_street" class="form-control" type="text" name="street" maxlength="255"></input>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_region">

                        Region

                    </label>
                    <div id="form-region">
                        <input id="id_region" class="form-control" type="text" name="region" maxlength="130"></input>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_state">

                        State

                    </label>
                    <div id="form-state">
                        <input id="id_state" class="form-control" type="text" name="state" maxlength="70"></input>
                   </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_city">

                        City

                    </label>
                    <div id="form-city">
                        <input id="id_city" class="form-control" type="text" name="city" maxlength="120"></input>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_neighbourhood">

                        Neighbourhood

                    </label>
                    <div id="form-neighbourhood">
                        <input id="id_neighbourhood" class="form-control" type="text" name="neighbourhood" maxlength="160"></input>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_postal_code">

                        Postal code

                    </label>
                    <div id="form-postal_code">
                        <input id="id_postal_code" class="form-control" type="text" name="postal_code" maxlength="20"></input>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_country">

                        Country

                    </label>
                    <div id="form-country">
                        <input id="id_country" class="form-control" type="text" name="country" maxlength="100"></input>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-4">
                <div class="form-group">
                    <label for="id_file">

                        Picture

                    </label>
                    <div id="form-file">


                          Currently: 

                    <a href="/media/pictures/picture_1.jpg"> … </a>
                    <input id="file-clear_id" type="checkbox" name="file-clear"></input>
                        <label for="file-clear_id">

                            Clear

                        </label>
                        <br></br>

                        Change: 

                        <input id="id_file" type="file" name="file"></input>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <button class="btn form-control" type="submit"> … </button>
        </div>
    </form>

</div>

我不想在这里放这么大的代码,但它说如果我添加一个提琴手链接它也需要代码。

编辑:我很抱歉忘记提到表单被包裹在一个带有 .container 类的 div 中。如果我将表单类更改为 .form-inline 我仍然没有得到我想要的结果,但我的表单似乎超出了“容器”的界限

4

1 回答 1

0

你的小提琴不包括 Bootstrap..

您可以改用 Bootply(它包括 Bootstrap 和 jQuery):http ://bootply.com/89310

此外,您的 HTML 标记有点偏离...

HTML输入应该像..一样关闭

<input id="id_country" class="form-control" type="text" name="country" maxlength="100"/>

不是这个..

<input id="id_country" class="form-control" type="text" name="country" maxlength="100"></input>
于 2013-10-22T13:22:25.740 回答