twitter-bootstrap Bootstrap 3 - 水平表格不起作用

Bootstrap 3 - Form horizontal not working

提问by Ron

I'm using Djangowith CrispyFormsand I'm updating an old project of mine to BS3.

我正在使用DjangowithCrispyForms并且我正在将我的一个旧项目更新为BS3.

The only thing I didn't find out how to adapt are form-horizontal. My forms used to look like this:

我唯一不知道如何适应的是form-horizontal. 我的表单过去看起来像这样：

Now the label is always on top of the input - like it was before with form-vertical.

现在标签总是在输入的顶部 - 就像以前一样form-vertical。

I readsome postson Stack, googled around but nobody has a working crispyanswer for me!

我在 Stack 上阅读了一些帖子，在谷歌上搜索，但没有人对我有一个清晰的答案！

The weirdest thing is that the Bootstrap guys say that they did not change or removethis class.

最奇怪的是 Bootstrap 的人说他们没有更改或删除这个类。

Any ideas what I can do to get my old, lovely horizontal` forms back?

有什么想法可以让我的旧的，可爱的水平` 形式回来吗？

Thanks!

谢谢！

Update:

更新：

CrispyFormsproduces the following, even with bootstrap3as template pack:

CrispyForms即使使用bootstrap3模板包，也会产生以下结果：

<div class="form-group" id="div_id_title">
    <label class="control-label  requiredField" for="id_title">Titel
        <span class="asteriskField">*</span>
    </label>
    <div class="controls ">
        <input type="text" name="title" maxlength="65" id="id_title" class="textinput textInput form-control"> 
    </div>
</div>

采纳答案by Ramiro Motteta

Take a look here:

看看这里：

http://django-crispy-forms.readthedocs.org/en/latest/crispy_tag_forms.html#bootstrap3-horizontal-forms

http://django-crispy-forms.readthedocs.org/en/latest/crispy_tag_forms.html#bootstrap3-horizo​​ntal-forms

You should add

你应该添加

helper.label_class = 'col-lg-x' #for example 'col-lg-2'
helper.field_class = 'col-lg-x' #for example 'col-lg-10'

BS3 has a 12 column grid system, more info about that here http://getbootstrap.com/css/#grid

BS3 有一个 12 列网格系统，这里有更多关于它的信息 http://getbootstrap.com/css/#grid

That made the form horizontal but unfortunately the labels align to the left, I'm trying to fix that now.

这使表单水平但不幸的是标签向左对齐，我现在正在尝试解决这个问题。

UPDATE: If you have issues with the vertical spacing between the fields add a row css class to the outer div of every field, the html output:

更新：如果字段之间的垂直间距有问题，请向每个字段的外部 div 添加一行 css 类，html 输出：

<div class="form-group row" id="div_id_title">

    ###labels HTML###

</div>

Probably a bug on the field.html template for bootstrap3.

可能是 bootstrap3 的 field.html 模板上的一个错误。

回答by Ain Britain

I spent a few hours trying to figure this out. For me, this worked. You have to go into the project settings.py and add the line:

我花了几个小时试图弄清楚这一点。对我来说，这奏效了。您必须进入项目 settings.py 并添加以下行：

CRISPY_TEMPLATE_PACK = 'bootstrap3'

After searched thru the docs, I ended up find that I had to do this in the crispy-forms source code itself:

通过文档搜索后，我最终发现我必须在脆形式源代码本身中执行此操作：

       if (
            TEMPLATE_PACK == 'bootstrap3'
            and not is_checkbox(field)
            and not is_file(field)
        ):
            css_class += ' form-control'

回答by Zim

Did you put the form-controlinside form-group?

你放form-control里面了form-group吗？

<form class="form-horizontal" role="form">
<div class="form-group">
    <label lass="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
</div>..
</form>

Demo: http://bootply.com/104095

演示：http: //bootply.com/104095