Bootstrap 3 - 表格水平不起作用

Question

我正在Django使用CrispyForms，我正在将我的旧项目更新为BS3。

我唯一没有找到如何适应的是form-horizontal。我的表单看起来像这样：

现在标签始终位于输入的顶部 - 就像之前的form-vertical一样。

我在堆栈上read一些posts，用Google搜索，但没有人为我提供 crispy 的答案！

最奇怪的是Bootstrap人say that they did not change or remove这个班。

我能做些什么来让我的旧的，可爱的横向`形式回来？

谢谢！

更新

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>

Answer 1

看看这里：

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

你应该添加

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

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

这使得表格水平但不幸的是标签对齐左边，我现在正试图解决这个问题。

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

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

    ###labels HTML###

</div>

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

Answer 2

您是否将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>

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

Answer 3

我花了几个小时试图解决这个问题。对我来说，这很有效。你必须进入项目settings.py并添加以下行：

CRISPY_TEMPLATE_PACK = 'bootstrap3'

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

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