Question

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

foundation.css：此行设置部分的2413代码 - 容器到可见性：隐藏我复制了实际的代码，但即使是示例也不适用于包含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');

Answer 2

如果 <div> 是不可见的，则可能意味着它没有很好地定义高度和宽度。那么呈现内容是没有意义的。为了避免这种缺陷，我们必须添加高度和宽度。

<div class="section-container tabs" data-section="tabs" style="height: 400px; width : 400px;"></div>

提及您各自的高度和宽度。

部分不可见，直到窗口调整大小

2 个答案: