列数在 Firefox 上未按预期工作

Question

其实我正在做这个项目： Project page

这是谷歌浏览器： 这是 Firefox 错误版本：

在 IE11 和 Chrome 上，我几乎可以以相同的方式看到它，正如预期的那样。 问题出在火狐上。 列数在其他浏览器中不起作用。 我不明白我做错了什么。 网站是基于 Bootstrap 的。 这里是生成页面顶部的代码：

<div class="lefttext">

    <?php $loop = new WP_Query( array( 'post_type' => 'expo_page', 'posts_per_page' => -1 ) ); ?>

    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

        <div class="row col-md-12">

            <h2 class="titlecontact text-left"><?php the_title();?></h2>

            <div class="section-divider big col-md-12"></div>

        </div>

        <div class="col-md-12 row">

            <?php the_content();?>

        </div>

    <?php endwhile; wp_reset_query(); ?>

</div><!-- .lefttext -->

这是css：

.lefttext{

column-count: 2;

column-gap: 20px;

-moz-column-count: 2;

-moz-column-gap: 20px;

-webkit-column-count: 2;

-webkit-column-gap: 20px;

margin: 20px 0 0 0;

}

如果需要，这是 Wordpress 生成的 HTML：

<div class="lefttext">



            <div class="row col-md-12">

                <h2 class="titlecontact text-left">MEETING &amp; CONFERENZE AL CASALE BORGHESE</h2>

                <div class="section-divider big col-md-12"></div>

            </div>

            <div class="col-md-12 row">

                <p style="text-align: left;">La location di un evento richiede una scelta accurata: i dettagli dell’arredo, l’atmosfera, l’organizzazione degli spazi sono tutti elementi essenziali per conferenze e meeting dall’elevata qualità. <em>Casale Borghese</em> ti propone i suoi lussuosi ambienti d’epoca per un evento di successo.</p>
<p style="text-align: left;"><em>Casale Borghese</em> suggerisce una formula esclusiva per l’organizzazione efficace e chic di meeting e conferenze:</p>
<p><br></p>
<p style="text-align: left;"><strong>AMBIENTE DI LUSSO</strong></p>
<p style="text-align: left;">Sia all’interno che all’esterno del palmento, è possibile usufruire di una varietà di spazi funzionali, i quali si estendono fra il lusso e la versatilità dell’antico casale. Il casale dispone di due aree principali:</p>
<p style="text-align: left;">• PALMENTO: comprende un’ampia sala retrò – chic ricavata al suo interno e restaurata in stile contemporaneo. L’interno del Palmento è articolato in più spazi dalla sontuosa architettura ed è ideale per allestire conferenze esclusive e organizzare raffinati meeting.</p>
<p style="text-align: left;">• GIARDINO D’EPOCA: consiste in un lussuoso angolo verde altamente versatile, corredato da piscina e gazebo rustico. Ideale per un meeting esclusivo o una conferenza alternativa, il giardino del casale consente inoltre di godere di uno spazio aggiuntivo, brioso e chic, per l’intrattenimento dei partecipanti all’evento.</p>
<hr>
<p style="text-align: left;"><strong>ALLESTIMENTO SMART</strong></p>
<p style="text-align: left;">Dalla disposizione di banchetti e suppellettili alle illuminazioni, la varietà di ambienti del casale ti consente di giocare con gli spazi e scegliere la soluzione più adatta a soddisfare le tue esigenze in fatto di organizzazione e stile.</p>
<p style="text-align: left;">Per meeting e conferenze esclusive, il casale ti propone una serie di elementi da scegliere per la tua formula personalizzata:</p>
<p style="text-align: left;">• allestimento<br>
• suppellettili<br>
• musica<br>
• illuminazione interna ed esterna<br>
• decorazioni<br>
• addobbi floreali</p>

            </div>


    </div>

Answer 1

嗯，你的 content 包含很多col-md-*-class 元素。 bootstrap 有这个规则：

@media (min-width:992px){
    .col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12{
        float:left
    }
    /* ... */
}

这里的float: left; 触发似乎是分栏符。不确定这是否是 Firefox 中的错误，或者其他浏览器是否确实存在错误......我认为规范中应该有一些东西......

无论如何，删除 float: left; 可以修复不需要的分栏符。

Answer 2

这个：

<div class="lefttext">
    <div class="row col-md-12">

确实没有意义。在大多数情况下，col-*s 应该只是rows 的子级，但col-md-12 直接位于lefttext 之下。另外，我认为您也不应该在同一个元素上使用 col-* 和 row。

我想你想要：

<div class="lefttext">
    <div class="row">
        <div class="col-md-12">