0

新しいブーストラップを試し、ミックスインを使用したかったのですが、ページに影響がないようです。また、ブートストラップ ドキュメントのサンプル 1 も試しましたが、どちらも機能しませんでした。

ミックスイン

.wrapper {
.make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

HTML

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

それが与えた結果は、中央に1列のオフセットを持つ1行ではなく、別々の行の各divのコンテンツでした。これを正しく機能させるにはどうすればよいですか？

前もって感謝します。

4

1 に答える 1

0

私の推測では、フォルダーbootstrap.lessからインポートしていないということです。フォルダーは、Bootstrap 3 プロジェクトのルートにありますless。less私は通常、フォルダーを取得lessしてプロジェクトフォルダーに配置し、作成しmain.lessてそこにインポートします。したがって、プロジェクト フォルダーが次のようになっているとします。

ここに画像の説明を入力

次に、次のmain.lessようになります。

@import '../less/bootstrap.less';
.wrapper{
   .make-row();
}
.content-main {
  .make-lg-column(8);
}

.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

そしてあなたのhtmlでは、main.lessファイルにリンクするだけで済みます。ただし、ファイルへのリンク後にless.jsmain.lessを追加する必要があります。したがって、head セクションは次のようになります。

<link rel="stylesheet/less" type="text/css" href="css/main.less" />
<script src="js/less-1.4.1.min.js" type="text/javascript"></script>

プロジェクトは、ファイルをダブルクリックして静的に開くのではなく、ローカル サーバー (mamp や xamp など) に配置する必要がありindex.htmlます。

次に、html 本文に次のようなものがあれば、それが機能していることを確認できるはずです。

<div class="wrapper">
    <div class="content-main">
        <div class="well">
            <h1>Left</h1>
        </div>
    </div>
    <div class="content-secondary">
        <div class="well">
            <h1>Right</h1>
        </div>
    </div>
</div>

html5 タグを使用することで、それを改善してより意味のあるものにすることもできます。たとえば<section>、行<article>を列として使用することができます (ただし、記事に特定のクラスを与える必要があることは明らかです)。何かのようなもの：

メインレス

@import '../less/bootstrap.less';
section{
  .make-row();
}
.main-content{
  .make-lg-column(5);
}

.secondary{
  .make-lg-column(7);
}

HTML

<section>
    <article class="main-content">
        <div>
            <h1>Main Content</h1>
        </div>
    </article>
    <article class="secondary">
        <div>
            <h1>Secondary content</h1>
        </div>
    </article>
</section>

お役に立てば幸いです。ハッピーブートストラップ：D

于 2013-08-19T17:22:02.817 に答える