5

私は Bourbon Neat で作業することを学んでおり、常に Bootstrap のグリッド システムで作業していました。Bourbon Neat の基本を学ぶために、この Bootstrap グリッド ページを再作成しようとしています。

私が使用する設定は次のとおりです。

// Bourbon Neat Grid Settings
$column: 70px;
$gutter: 30px;
$grid-columns: 12;
$max-width: em(1170);
$visual-grid: true;

ブレークポイントを決定し、列数も変更できる新しいブレークポイント関数で設定しました。

しかし、私が変更したいのはコンテナのサイズです。Bootstrap では、コンテナーの最大幅は次のように変化します。

@media >1200px:最大幅: 1170px;

@media >992px:最大幅 970px;

@media >768px:最大幅: 750px;

ただし、Bourbon Neat では、max-width は変数で 1 回設定されます。現在max-width: em(1170);、このコンテナーのサイズを変更するにはどうすればよいですか?に設定しています。Bootstrap 3 の代わりに Bourbon Neat で同じサンプル ページを実現するにはどうすればよいですか? Susyではコンテナの幅を設定できることを知っています

4

6 に答える 6

1

次のようなものが機能する場合があります。

$large-screen:  new-breakpoint(max-width 1200px 12);
$medium-screen: new-breakpoint(max-width  992px 12);
$small-screen:  new-breakpoint(max-width  768px  6);

@mixin bootstrap-container {
    @include outer-container;
    @include media($large-screen)  { max-width: 1170px; }
    @include media($medium-screen) { max-width:  970px; }
    @include media($small-screen)  { max-width:  750px; }
}

次に、次のように mixin を使用します。

#foo {
    @include bootstrap-container;
}

フィードバックをお待ちしております。

于 2014-03-07T14:49:47.260 に答える
0

これは、セットアップでいくつかの CSS/SCSS オーバーライドを使用して行うことができます。

Bourbon Neat の標準のように、SCSS ファイルにこれがあると仮定しましょう。

$max-width: 1000px;

@import "bourbon/bourbon";
@import "neat/neat";

.outer-container{
   @include outer-container;
}

現在、外側のコンテナでラップするものはすべて、最大幅 1000px (または例では 1170em) になります。

さまざまな画面サイズ/メディア クエリでコンテナーの最大幅を変更するには、元の宣言に取って代わるこれらの行の後にメディア クエリを含めることができます。

.outer-container{
   max-width: 800px;
   @media all and (min-width: 750px){
    max-width:1500px;
  }
}

この例では、画面サイズが 749px より大きい場合を除き、最大幅は 800px 幅になります。この場合、最大幅は 1500px になります。

これは少しハックな感じがする単純化された乗り越しですが、仕事を終わらせる必要があり、一度セットアップすれば心配する必要はありません. バーボンニートがこれを行う適切な方法を持っている場合、私はそれに気づいていません.

于 2014-01-07T07:10:03.057 に答える
0

コメントできないので、 という mixin を使用するAndrew Hacking の回答から構築したいと思いbootstrap-containerます。Voodoocode のコメントによると、これは $max-width 変数に触れていないため、ビジュアル グリッドでは機能しません。これを機能させるには、body:before の最大幅を設定するコードが必要です。それは次のように機能します：

@if ($visual-grid) {
 body:before {
   @include bootstrap-container;
 }
}

これを行うと、外側のコンテナーの幅の設定がグリッドで有効になります。

于 2015-06-22T19:03:48.803 に答える
0

これはあなたの質問に答えると思います：

$max-widthで変数値を変更し、_grid-settings.scssそのスタイル シートを基本の bitters スタイルシートである にインポートでき_bitters.scssます。

$max-widthインポートせずに の値を変更すると、幅_grid-settings.scssに変化は見られません。outer-container

于 2014-04-19T00:38:33.967 に答える