0

だから私は、より少ないこととブートストラップを理解し始めたばかりだと思います。私はレスポンシブテーマを構築していますが、私が抱えている問題の 1 つは、1 ピクセルの境界線を持つスパンがあることです。この 1 ピクセルの境界線は自然に幅を広げ、全体をスローします。もちろん、スパンに別のクラスを平手打ちしてオーバーライドすることもできますwidth:300 設定を変更して 299 にしますが、レスポンシブ テーマであるため、さまざまな画面幅に対していくつかのクラスを作成する必要があります。

ミックスインをより少ないブートストラップに書き込んでコンパイルに成功しましたが、ミックスインはクラスとして表示されていないようです-コンパイルされたCSSファイルにはありません。これが mixin.less ファイルのコードです - 私の追加は "Wedit" の下にあります:

.offset (@columns) {
  margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
}

.span (@columns) {
  width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
}

//Wedit
.spanBorder (@columns) {
  width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))) - 1;
}

おそらく.spanBorder別のファイルか何かを呼び出す必要があると思いますが、どこで、またはこれについて正しいかどうかさえわかりません。方程式の目的は、元の幅が何であれ、単純に 1 ピクセルを取得することです (したがって、1 ピクセルの境界線は問題を引き起こしません)。

4

1 に答える 1

0

.spanBorder は「関数」で.spanBorderXあり、これを呼び出す必要があります。.spanBorderX (@gridColumns);

.core (デフォルト グリッド) の完全なコードを参照してください。

  .core (@gridColumnWidth, @gridGutterWidth) {

    .spanX (@index) when (@index > 0) {
      .span@{index} { .span(@index); }
      .spanX(@index - 1);
    }
    .spanX (0) {}

    .spanBorderX (@index) when (@index > 0) {
      .spanBorder@{index} { .spanBorder(@index); }
      .spanBorderX(@index - 1);
    }
    .spanBorderX (0) {}


    .offsetX (@index) when (@index > 0) {
      .offset@{index} { .offset(@index); }
      .offsetX(@index - 1);
    }
    .offsetX (0) {}

    .offset (@columns) {
      margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1));
    }

    .span (@columns) {
      width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
    }

    .spanBorder (@columns) {
     width: ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))) - 1;
     }

    .row {
      margin-left: @gridGutterWidth * -1;
      .clearfix();
    }

    [class*="span"] {
      float: left;
      min-height: 1px; // prevent collapsing columns
      margin-left: @gridGutterWidth;
    }

    // Set the container width, and override it for fixed navbars in media queries
    .container,
    .navbar-static-top .container,
    .navbar-fixed-top .container,
    .navbar-fixed-bottom .container { .span(@gridColumns); }

    // generate .spanX, .spanBorderX and .offsetX
    .spanX (@gridColumns);
    .spanBorderX  (@gridColumns);
    .offsetX (@gridColumns);

  }

今すぐ使用できる再コンパイル後に、このコードを mixins.less に追加します。

  <div class="row"><div class="spanBorder6" style="background-color:red;border-left:1px solid blue;">test</div><div class="spanBorder6" style="background-color:red;border-left:1px solid blue;">test</div></div>

もちろん、spanBorder1、spanBorder2 なども機能します。

于 2013-05-23T11:59:04.160 に答える