1

Bootstrap 3 は、より明示的な 、 などのグリッド システムのクラスの以前のアプローチを変更しました。span優れた改善の imo ですが、それでも列クラスを追加したいことがわかりました。具体的には、 と の間の列クラスを作成したいと考えています。col-xscol-mdcol-mdcol-lg

標準の列クラスの長さを変更するために LESS 変数を変更できることはわかっていますが、それらを変更したくありません。代わりに、（可能であれば）さまざまな画面サイズ用のクラスを追加したいと考えています。

それを行う方法に関する提案はありますか？私はいくつかの調査を行いましたが、Bootstrap 3 は非常に新しいため、そのようなものは見つかりませんでした。

4

2 に答える 2

5

まあ、それはBootstrapが少なくなり、LESSが多くなります。難しいことではなく、時間がかかるだけです。そうは言っても、中間のサイズ (col-mdlg-* など) を作成したい場合は、次のようにします。

  1. 新しい .less ファイルを作成し、bootstrap.less ファイルに @import を作成します。これにより、Bootstrap 固有の変数と mixin をすべて使用できるようになります。

  2. その後、そのインポートの下にある md または lg の grid.less からいくつかのグリッドのものをコピーして、上部に両方のデフォルトのものを確実に取得します (xs、sm、および md/lg を削除します。どちらを使用するかによって異なります)。選択した)、および下部のサイズ固有のものを選択し、クラスを新しいクラス名に変更します。

  3. サイズ固有のものの上部に、次のように表示されます。

    @media (min-width: @screen-desktop) {
  .container {
    max-width: @container-desktop;
  }
  //rest of specific stuff here
}

    @screen-desktop をトリガーする最小画面幅である実際の値に変更し、次に @container-desktop をコンテナーの最大幅である実際の値に変更します。

  4. 新しい less ファイルをコンパイルしたり、コードを出力に接続したりして、新しいスタイルを楽しんでください。

于 2013-09-19T15:19:03.480 に答える
1

また、LESS や CSS をまったく変更せずに、より手を加えずにアプローチすることもできます。

http://tmaiaroto.github.io/gridline/

...それをページに配置し、データ属性を使用して、その場で行ごとに列数を調整します。クラスを調整する必要はまったくありません。新しいクラスを取得するだけなので、「col-md-24」のようなものは常に定義されているかのように機能します。

于 2013-12-11T06:22:18.713 に答える