6

スパンのあるテーブルを取得しようとすると。流動的なテーブルを取得します。これらの奇妙なスペースのないフラットテーブルを取得するにはどうすればよいですか?何が悪いのかを説明する写真:

流体テーブル

ソースページの完全なリストhttps://gist.github.com/2984012

4

2 に答える 2

6

先頭にスペースがありません

問題

3 行目に表示されるスペースは、ブートストラップの「機能」です。コンテナーの最初のスパンには左マージンがありません。

[class*="span"]:first-child {
    margin-left: 0;
}

(ソース: https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L613 )

修理

最初の項目の前に非表示の .span 要素を追加できます。これにより、最初の項目にもスペースが入ります。

<div class="span" style="display: none;"></div>

レイアウトの穴

問題

最初のアイテムは (高さで) 長いようです。

修理

最小の高さを設定しているようですが、最大の高さを修正するか、最小の高さよりも長いアイテムがないことを確認する必要があります。

于 2012-06-24T18:32:00.023 に答える
5

コード内のアイテムの子クラスのサムネイルではなく、クラスのサムネイルを使用します。

<div class="container">
<ul class="thumbnails">
    <!-- start item -->
    <li class="span3">
    <div class="thumbnail">
        <a href="#" title="" ><img src="http://placehold.it/260x180" alt=""></a>
        <h5><a href="#" title="" >Ruby on Rails Ringer</a></h5>
    <p>$17.99</p>
    </div>
    </li>
    <!-- end item -->    
</ul>
</div>

2 番目に、すぐに使用できる Fluid を使用するサムネイル クラスがあるため、 row-fluidクラスは必要ありません。

<div class="">
  <div data-hook="homepage_products">

最後のポイント - コードにコンテナーが表示されません

<div class="container"> 

jsfiddle

于 2012-06-24T19:48:56.917 に答える