css - 在窗口调整大小之前部分不可见

Question

我无法让部分正常工作，它们在窗口调整大小之前是不可见的。

foundation.css:2413 此行的代码将 section-container 设置为 visibility:hidden 我复制了实际代码，但即使示例在包含 div 的代码中也不起作用。

<div class="large-8 columns large-centered">                        
    <form class="custom ajaxform" data-validate="parsley" method="post" action="formProcess"> 
        <input type="hidden" name="formtype" value="test" >               
        <fieldset>
            <legend>Test</legend>
            <span class="icon24 icon-close"></span>
            <h4><small>Test</small></h4>
            <?= View::make('forms.header') ?> 
            <h4><small>Test</small></h4>
            <div class="section-container tabs" data-section="tabs">
                <section class="active">
                    <p class="title" data-section-title><a href="#">Test</a></p>
                    <div class="content" data-section-content>
                        <div class="row">
                            <div class="large-4 columns">
                                <label>Test *</label>
                                <input type="text" name="test" data-required="true">
                            </div>                                                                                               
                        </div>
                    </div>
                </section>
                <section>
                    <p class="title" data-section-title><a href="#">test Tab 2</a></p>
                    <div class="content" data-section-content>
                        <div class="row">
                            <div class="large-6 columns">
                                <label>Second *</label>
                                <input type="text" name="second" data-required="true">
                            </div>                                                        
                        </div>                                                        
                    </div>
                </section>
            </div>                
            <div class="row">
                <div class="large-12 columns">
                    <button class="small radius button" style="float:right" type="submit">Submit</button>
                </div>
            </div>      
        </fieldset>
    </form>
</div>

Answer 1

可能是因为您以编程方式添加了这些部分。在这种情况下，您需要强制调整大小，以便触发基础以正确绘制它们。

我遇到了同样的问题，快速谷歌搜索后，这将解决它:

$('[data-section]').trigger('resize');