我有一个django模板，我希望它能够呈现一个模型形式，但具有不同的列和行。更具体地说，我希望它们在三列的网格中，最后一行将具有剩余的（如果有的话）。我的模板正在渲染（它有点大，所以我用小提琴）the following code。但是当我看到不同的行时，我的表单stil有一列。我错过了什么吗？
（我必须在这里输入代码吗？）
<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>
我不想在这里放置如此大的代码，但它说如果我添加一个fiddler链接它也需要代码。
编辑：对不起忘了提到表单被包含在带有.container类的div中。如果我将表单类更改为.form-inline，我仍然无法得到我想要的结果，但我的表单似乎已经脱离了“容器”的界限答案 0 :(得分：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>