0

コンパスの青写真を使い始めたばかりで、次のような単純なフレームを作成しています。

$blueprint_grid_columns: 12;
$blueprint_grid_width: 60px;
$blueprint-grid-margin: 20px;

@import "blueprint";

.frame {
  @include container;
  .header{
    @include column(12);
    background:#000;
    height:100px;
  }
  .left_bar{
    @include column(1);
    background:#ccc;
    height:450px;
  }
  .content{
    @include column(10);
    background: #000;
    height:450px;
  }
  .right_bar{
    @include column(1);
    backgrounf:#ccc
    height:450px;
  }
}

HTML：

<body>
  <div class='frame'>

    <div class='header'>
    </div> <!-- end header -->

    <div class='left_bar'>
    </div> <!-- end left_bar -->

    <div class='content'>
    </div> <!-- end content -->

    <div class='right_bar'>  
    </div> <!-- end right_bar -->

  </div> <!-- end frame -->
</body>

right_barは最後の列のスペースに収まらず、left_barの真下に表示されます。誰か教えてもらえますか？どんな助けでも大歓迎です。

C

4

2 に答える 2

1

trueヘッダークラ​​スとright_barクラスに追加する必要があると思います。

.header{
  @include column(12, true);

....
.right_bar{
  @include column(1, true);

これにより、コンパスはそれが最後の列であり、マージンをゼロにする必要があることを認識できます。

于 2013-01-30T18:23:31.207 に答える
0

私はそれを理解しました。グリッドを少し強打から押し出す境界線をいくつか追加しました。幅をオーバーライドして修正しましたが、少しハッキーなようです。境界線を考慮に入れるための青写真の方法はありますか？

于 2013-01-31T14:37:06.080 に答える