cakephp - CakePHP 和 Twitter Bootstrap 带有嵌套内联表单的水平表单

Question

我正在使用 CakePHP2.x 的TwitterBootstrap 插件。而且我无法将水平表单与嵌套的内联表单结合使用。

我的代码的一部分：

<?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>

在上面的例子中会发生这种情况：

和生成的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' -> false 添加到两个日期表单字段时，它们会内联移动，但填充等已消失。

和生成的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 页面上将此作为问题发布，因为我认为它与插件有关，但我希望有人知道临时解决方法。

Answer 1

也许这可以工作。我以前用过它，它看起来像这样：

<?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 clear:both 设置了将元素移动到下方而不是旁边。

尝试这个：

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