Question

我正在使用CakePHP2.x的TwitterBootstrap Plugin。而且我无法将水平形式与嵌套内联形式的组合工作。

我的部分代码：

<?php
    echo $this->Form->create('Event', array('class' => 'form-horizontal'));
    echo $this->Form->input('Event.short_name',array(
        'label' => 'Short name', 
        'type' => 'text', 
        'class' => 'span5'
    ));
?>
<div class="control-group">
    <div class="control-label">Date & Time</div>
    <div class="controls form-inline">
        <div class=" input-append">
            <?php 
                echo $this->Form->input('Event.start_date', array(
                    'label' => false,
                    'type' => 'text', 
                    'class' => 'span2 start_date', 
                    'after' => '<span class="add-on datetime"><span class="icon-calendar"></span></span>'
                ));

                echo $this->Form->input('Event.end_date', array(
                    'label' => false,
                    'type' => 'text', 
                    'class' => 'span2 end_date', 
                    'after' => '<span class="add-on"><span class="icon-calendar"></span></span>'
                ));
            ?>
        </div>
    </div>
</div>

在上面的示例中，会发生这种情况： capture

和生成的html

<div class="control-group">
    <div class="control-label">Date & Time</div>
    <div class="controls form-inline">
        <div class=" input-append">
            <div class="control-group">
                <div class="controls">
                    <input name="data[Event][start_date]" class="span2 start_date" type="text" value="2013-06-15" id="EventStartDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
                </div>
            </div>
            <div class="control-group">
                <div class="controls">
                    <input name="data[Event][end_date]" class="span2 end_date" type="text" value="2013-06-22" id="EventEndDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
                </div>
            </div>
        </div>
    </div>
</div>

当我添加'div' - ＆gt; false为两个日期表单字段，它们内联移动但填充等已消失。 capture

和生成的html

<div class="control-group">
    <div class="control-label">Date & Time</div>
    <div class="controls form-inline">
        <div class=" input-append">
            <input name="data[Event][start_date]" class="span2 start_date" type="text" value="2013-06-15" id="EventStartDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
            <input name="data[Event][end_date]" class="span2 end_date" type="text" value="2013-06-22" id="EventEndDate" required="required"><span class="add-on"><span class="icon-calendar"></span></span>
        </div>
    </div>
</div>

我认为这是因为所有表单字段都放在控件div中...有谁知道如何解决这个问题？

我也在GitHub page上发布了这个问题，因为我认为它与插件有关，但我希望有人知道临时工作。

Answer 1

也许这可行。我之前使用它，它看起来像这样：

enter image description here

<?php echo $this->Form->create('Event', array(
'class' => 'form-horizontal',
'inputDefaults' => array(
    'format' => array('before', 'label', 'between', 'input', 'error', 'after'),
    'div' => array('class' => 'control-group'),
    'label' => array('class' => 'control-label'),
    'between' => '<div class="controls">',
    'after' => '</div>',
    'error' => array('attributes' => array(
            'wrap' => 'span', 'class' => 'help-inline'
    )),
)));?>
<fieldset>
   <?php echo $this->Form->input('Event.start_date', array(
        'label' => array('class' => 'control-label',
            'text' => 'start date'),
    ));?>
</fieldset>
<?php echo $this->Form->end();?>

Answer 2

问题可能是TB和Cake之间关于浮动和清除的冲突，因为cake.generic.css为表单div设置清除：两者都移动元素而不是下一个元素。

试试这个：

div.form-inline div{
    clear: none;
}

CakePHP＆amp; Twitter Bootstrap水平表单，嵌套内联表单

2 个答案: