2

セマンティック グリッド ミックスインに問題があります。明らかな何かが欠けている場合は申し訳ありませんが、助けを求めています。次のコードがあります。

index.html

<header>
  <a id="logo" href="#">Logo Link</a>
  <div id="search">
      <span class="prefix">#</span>
      <input type="text">
  </div>
</header>

app.scss

header { @include outerRow();
  #logo { @include column(8); }
  #search { @include column(4); @include innerRow(collapse);
    span { @include column(3); }
    input { @include column(9); }
  }
}

これはワイド画面で正しく動作しますが、プレフィックスはナロー モードでは全幅に伸びます。私はこの冒険の初心者ですが、狭い画面の場合は自動的に再計算されると思いますか、それとも @media を使用して正しく機能させる必要がありますか?

画像を投稿するのは初めてなので、リンクは次のとおりです。

ワイド (正しい) - http://imgur.com/dtsGtxM

ナロー (騙された) - http://imgur.com/jX4D1NU

編集：解決策は次のようです：

span { @include column(3); @include mobileColumn(1); }
input { @include column(9); @include mobileColumn(3); }

私はそれを完全には理解していませんが。以下のように、列に新しいネストされた行を呼び出すことが許容されるかどうかはまだわかりませんが、うまくいくようです:

#search { @include column(3); @include innerRow(collapse);
4

1 に答える 1

0

Foundation には、メディア クエリを使用して 768px にデフォルトのブレークポイントがあります。

したがって、大きいデバイスで表示する場合は column() mixin を使用し、小さい画面サイズでは mobileColumn() mixin を使用します。

また、div を設定します (あなたの場合、#search を列にすると、内側の行が予期しない結果を生成します。列を別の内側の行コンテナーにラップする必要があります。

<header>
  <a id="logo" href="#">Logo Link</a>
  <div id="search">
      <div class="inner-row">
          <span class="prefix">#</span>
          <input type="text">
      </div>
  </div>
</header>

と

ヘッダー { @include outerRow(); #logo { @include column(8); } #search { @include column(4); スパン { @include 列(3); } 入力 { @include 列(9); } } .inner-row { @include innerRow(collapse); } }

http://foundation.zurb.com/old-docs/f3/media-queries.php

于 2013-11-11T11:46:52.493 に答える