0

私の簡単なコードは次のとおりです。

<div class="row">
  <div class="large-3 columns">
     <br>
  </div>
  <div class="large-6 columns">
    <h1>Welcome</h1>
  </div>
  <div class="large-3 columns">
    <br>
  </div>
</div>

<br>sを取り出すと、存在しない<h1>かのようにコンテンツが左側に表示されlarge-3 columnsます。

これには理由がありますか？ダミーコンテンツを追加する以外に、それを修正するより良い方法はありますか?

4

2 に答える 2

2

Foundation 4 には、グリッド オフセットと呼ばれるものがあります。

<!-- more of what you're looking for -->
<div class="row">
    <div class="large-offset-3 large-6 columns">
        <h1>Welcome</h1>
    </div>
</div>

ただし、これはグリッドの中央に配置する必要がある部分を処理する最良の方法ではありません。Foundation 4 にも中央揃えのグリッドがあるため、最も正しいコードは次のようになります。

<!-- centered column -->
<div class="row">
    <div class="large-6 large-centered columns">
        <h1>Welcome</h1>
    </div>
</div>

これらすべてに関するドキュメントは、http: //foundation.zurb.com/docs/components/grid.htmlにあります。

于 2013-08-27T18:07:27.473 に答える