4

を使用して複数のボタンを列に表示してみました

.columnized {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

とマークアップ

<div class="columnized col-md-6">
    <p>
        <button type="button" class="btn btn-default btn-xs">text</button>
    </p>
    <!-- ... more buttons ... -->
</div>

しかし、div全体が線のように表示され、すべてのps が右に浮いているように見えます。

これが と で機能し、 では機能しないのFirefox 28は興味深いこと です。Internet Explorer 10Chrome 33

4

2 に答える 2

12

私はTwitterBootstrapを使用していて、がとして.col-md-6定義されているため、細い線になっています。min-height1px

クラスに追加min-height: initialすることでなんとか解決しました。columnized

これが、この奇妙な問題にぶつかる他の人に役立つことを願っています.

于 2014-04-04T07:31:27.313 に答える
5

私はまた、

-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;

と

break-inside: avoid-column;
-webkit-column-break-inside: avoid;

列間でコンテンツが垂直に分割される問題を解決しました。

column-count タグは、フローティング div よりも実装が簡単です。主な違いは、列のコンテンツが垂直方向に並べられるのに対し、フローティング コンテンツは水平方向に並べられることです。お役に立てれば。

于 2016-03-16T16:02:31.153 に答える