0

我正在使用 BootStrap 帮助器在 PlayFramework 2.1 中开发一个“注册表单”。我为此覆盖了引导帮助程序：

@(elements: helper.FieldElements)  
<div class="control-group @if(elements.hasErrors) {error}">  
  <label class="control-label" for="@elements.id">@elements.label</label>  
  <div class="controls">@elements.input    
    @if(elements.hasErrors) { <p class="help-block">@elements.errors.mkString(", ")</p> }  
  </div>  
</div>

我跟着这个教程

现在，它正在正确地创建水平形状。但是如果我使用 helper 创建一个复选框，我的复选框和标签没有对齐。看这张图：

复选框

第一个复选框是使用助手创建的，第二个是我编写的：

<div class="control-group">
   <div class="controls">
       <label class="checkbox">
            <input type="checkbox"> I accept 
       </label>
    </div>
</div>

我想生成与我编写的相同的 HTML（第二个复选框）。我被帮手吓坏了！如何对齐我的复选框？我将始终需要创建自己的助手？

4

1 回答 1

0

前面放一个空格就好了@elements.label。它只是普通的 HTML。或者前面@elements.errors.mkString(", ")我不确定。

但我还构建了一个更好的 fieldConstructor，您可以在其中使用前置输入作为图标和字母以及其他功能。你可以使用它，通常它会做你喜欢的一切，甚至更多。

@(elements: helper.FieldElements)

@**************************************************
* Generate input according twitter bootsrap rules *
**************************************************@
<div class="@if(elements.hasErrors) {alert alert-error}">
    <label for="@elements.id"><strong>@elements.label</strong> <small> @MyMessages.get(elements.infos.mkString(""))</small></label>

@if(elements.args.containsKey('_iconcls)){
<div class="input-prepend">

<span class="add-on">
    <i class="@elements.args.get('_iconcls) icon-size"></i>
</span>

    @elements.input

    <span class="help-block error small"><small>@MyMessages.get(elements.errors.mkString("; "))</small></span> 
</div>
}else{
    @if(elements.args.containsKey('_prependedInput)){
<div class="input-prepend">

<span class="add-on">
    @elements.args.get('_prependedInput)
</span>

    @elements.input

    <span class="help-block error small"><small>@elements.errors.mkString("; ")</small></span> 
</div>
    }else{
        @elements.input
        <span class="help-block error small"><small>@elements.errors.mkString("; ")</small></span> 
    }
}

于 2013-06-24T10:57:10.317 回答