3

class="span3"これは Bootstrap コミュニティでよくある問題のようです。たとえば、スパン幅が奇数のセンタリングとクラス分けのプロセスです。その中.rowに3つの.span3クラスがあります。3 つのクラスを使用する方が簡単であることはわかっspan4ていますが、それによって要素が大きくなるのが好きではありません。

これまでにいくつかのことを試しました：

  1. カスタムの 15 列のグリッドを作成したので、.span3実際に使用したい 3 つの要素の前後にクラスを指定できますresponsive-bootstrap.cssが、応答ファイルが 12 列のグリッドを処理するため、開始時に奇妙な動作をします。

  2. .center次のCSSを使用するカスタムクラスにすべてを配置しようとしました:

    .center {
    float: none;
    margin: 0 auto;
    text-align: center;
}

価値があるのは、ブラウザの幅が ~980px から ~1199px の間の場合、すべてが機能することです。

この問題を解決する簡単な方法があるはずですよね? 古いブラウザでも見栄えがするかどうかは心配していません。これは個人的なサイトです。これが私が現在いる場所で、15 列のグリッドで作業しています。

ここに私のJSFiddleがあります

HTML:

<div class="row">
    <div class="center">
           <ul class="thumbnails" id="portfolio-links">
                <li class="span3"></li>
                <li class="span3" id="item1">
                    <a href="#" class="thumbnail" id="portfolio-element"></a>
                </li>
                <li class="span3" id="item2">
                    <a href="#" class="thumbnail" id="portfolio-element"></a>
                </li>
                <li class="span3" id="item3">
                    <a href="#" class="thumbnail" id="portfolio-element"></a>
                </li>
                <li class="span3"></li>
           </ul><!--/.thumbnails-->
    </div><!--/.center-->
</div><!--/.row-->

CSS:

#portfolio-links {
    display: block;
    margin: 0 auto;
    float: none;
}
.center {
    float: none;
    margin: 0 auto;
    text-align: center;
}
4

1 に答える 1

2

<div class="center">のサイズでを作成span9し、余分な を削除するだけliです。

最終結果は次のようになります: http://jsfiddle.net/AKWqP/

于 2013-03-09T18:12:10.570 に答える