0

Bootstrap 3.0 を使用して、列間に空白を含むグリッド レイアウトを作成する必要があります。私は行と幅 3 の 4 つの列を使用しています。しかし、それらはすべて間にスペースなしで一緒に表示されます。どうすればこれを行うことができますか?

例：

<div class="row">
  <div class="col-lg-3" style="background-color: grey;">
    col1
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col2
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col3
  </div>
  <div class="col-lg-3" style="background-color: grey;">
    col4
  </div>
</div>
4

2 に答える 2

1

ブーストラップクラス「col-lg-3」を使用したことも聞いたこともありません。X が 12 列のグリッドの列数である "spanX" を使用します。

<div class="row">
  <div class="span3" style="background-color: grey;">
    col1
  </div>
  <div class="span3" style="background-color: grey;">
    col2
  </div>
  <div class="span3" style="background-color: grey;">
    col3
  </div>
  <div class="span3" style="background-color: grey;">
    col4
  </div>
</div>
于 2013-08-16T20:26:34.527 に答える
1

@ShaharGalukman との話し合いの結果、Bootstrap 3.0 はこの機能をネイティブでサポートしていないようです。だから、私がしたことは次のとおりです。

Bootstrap 3.0 構文を使用して、すべての列をまとめてグリッドを作成します。次に、背景色を div に設定する代わりに、設定を含むそれぞれの内部colに新しいものを作成しました。このようにして、列間の分割があります。新しいdivの で空白を調整できます。a を設定すると、列間にスペースがなくなります。divcolbackground-colormarginmargin: -15px

これが他の誰かに役立つことを願っています!

<div class="row">
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col1
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col2
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col3
    </div>
  </div>
  <div class="col-lg-3">
    <div style="background-color: grey;">
      col4
    </div>
  </div>
</div>
于 2013-08-16T21:04:51.707 に答える