10

Bootstrap-Twitter を使用していますが、流動的な行を使用しようとすると、スパンのオフセットが機能しません。ここにいくつかのコードがあります：

<div class="container-fluid">
    <div class="row-fluid">
        <div class="well span4 offset4">
            Content here
        </div>
    </div>
</div>

そして、起こっていることは、井戸が4 つのスペースでオフセットされていないということだけです。私はそれをグーグルで検索しましたが、明確な答えを見つけることができませんでした。誰かが修正していますか？

4

4 に答える 4

8

ブートストラップはこれをサポートするようになりました:

2.1.0-wip 以降、.offset* クラスは流体グリッド システムで動作するようになりました

https://twitter.com/twbootstrap/status/215649222224134144

于 2012-06-21T12:06:11.373 に答える
7

!importantこのプロパティはピクセル値を定義し、液体を使用するポイントはパーセンテージを使用することであるため、既存のオフセット クラスではこのプロパティを使用しません。

これは、流動的な行の独自のオフセットを作成するために私が思いついた式です。

@for $i from 1 through 12 {
  .row-fluid .offset#{$i} {
    margin-left: (6.382978723% * $i) + (2.127659574% * $i);
    *margin-left: (6.329787233638298% * $i) + (2.0744680846382977% * $i);
  }
}

では、ここに表示されている内容を説明しましょう。これは、SCSS を使用した for ループであり、offset1 ～ offset12 クラスを記述するために使用されます。これは 1 つのメディア クエリに対してのみです。3 回定義する必要があるためです (幅とオフセットは、Twitter ブートストラップ コードの 3 つの個別のメディア クエリで変更されるため)。基本原則は次のとおりです。

margin-left = (width_of_span1 * x) + (margin-left_of_row-fluid_span* * x)

の値はx、オフセットする列の数に等しいため、の値として.offset1使用します。の値として使用するためです。1x.offset1212x

Twitter ブートストラップはコンテナ内margin-left: 0の:first-child要素にを配置するため、もう 1 つのスタイルを調整する必要があります。.row-fluid最も簡単な方法は!important、新しく宣言された.row-fluid .offset*クラスに属性を追加することです。:first-child次のようにセレクターを調整することもできます。

.row-fluid [class*="span"]:first-child:not([class*=offset])

これは、要素にクラスがまったくないmargin-left: 0場合にのみ適用されます。ただし、そのタイプのブラウザのサポートはおそらくかなり限られています。.span*.offset*

于 2012-06-06T18:42:41.113 に答える
4

この問題はGithubで提起されており、Bootstrap開発者によると、修正は時間とともに行われるため、当面の間は主にハックに依存する必要があると思います。それを実行する2つの方法は.offset、.row-fluidクラスにを追加するか（それがうまくいく場合）、スタイルシートに選択したクラスを追加して、次のようにプロパティで.offset宣言することです。!important

.offset4 {
    margin-left: 340px !important;
}
于 2012-04-15T18:08:30.773 に答える
2

これが私がやっていることです：

<div class="row-fluid">
  <div class="span4"></div>
  <div class="span4">
    Content here
  </div>
</div>
于 2012-07-23T11:28:06.720 に答える