css - Twitter Bootstrap：列間にマージンはありません

Question

ブートストラップのスパン間のマージンを削除したい。

1つのアイデアは、cssプロパティをゼロマージンとパディングで上書きすることです。次に例を示します。http：//jsfiddle.net/kKEpY/3/

左側の列が右側の列に浮かぶことを除いて、それは機能しますが、私は直接ブートストラップソリューションを好みます。では、ブートストラップは、列のマージン（スパン流体）をクリアするプロパティを提供しますか？

よろしく

Answer 1

更新：以下のソリューションは古いバージョン（<2.1）を参照しています：v2.1以降、流体グリッドは通常のグリッド寸法から自動的に計算されます-githubのvariables.lessを参照してください

同じ結果を得るには、とをに設定@gridGutterWidthし、適切と思われるよう0に設定します。@gridColumnWidth@gridColumns

---

そこに、設定

• @fluidGridColumnWidth8.333333333%と_
• @fluidGridGutterWidthに0%

あなたはそれを得ることができます（jsfiddle）。

警告：ジェネレーターは、変数とデフォルトの変数（jsfiddleで削除したもの）に基づいてルールを設定しているようです。

Answer 2

私はあなたとまったく同じ問題を抱えていたので、最新のBootstrapバージョン2.3.1でこれをどのように解決したかを次に示します。

最初に、次のように「行」クラスを持つ親 div に「スペースなし」クラスを追加する必要があります。

<div class="row-fluid no-space">
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
  <div class="span3">...</div>
</div>

次に、次のように、その行に必要な要素の数に応じて css を変更します。

.no-space [class*="span"]{
  margin-left: 0 !important;
  width: 25% !important; // This is for 4 elements ONLY in the row
}

幅の計算は次のとおりです。

100 / number of elements in the row = width.

私の場合、それは4つの要素だったので、次のとおりです。

100 / 4 = 25%;

3 要素の場合は次のようになります。

100 / 3 = 33.3333333333%;

この問題が発生したプロジェクトに複数のケースがある場合は、一意の ID またはクラスを CSS ルールに追加して、それらすべてに影響を与えないようにすることをお勧めします。

それでおしまい。ブートストラップを再ダウンロードしてソース ファイルを処理する必要はありません
PS: この方法はレスポンシブ デザインでも機能します ;)

Answer 3

上記の回答は非常に役に立ちますが、私のシナリオは少し異なります。

HTMLにspan4とspan8のdivがあり、htmlコードは次のようになります。

<div class="row">
    <div class="span4">Content of span4</div>
    <div class="span8">Content of span8</div>
</div>

そのためには、margin-leftを 0 に書き換えるだけでなく、span4 と span8 の幅もカスタマイズする必要があります。だからここに私のために働くコードがあります：

.no-space [class*="span"]{
  margin-left: 0 !important;

  &.span8{
      width: 75%;
  }
  &.span4{
      width: 25%;
  }
}

インスピレーションをありがとう！

Answer 4

HTMLでマージンのあるスパンとマージンのないスパンを使用したかったのです。使用量を減らすと、これは非常に簡単です。独自のlessファイルを作成し、「no-margin-span.less」のような名前を付けて、lessコードのどこかに含めます。その後、htmlファイルで「span5」の代わりに「no-margin-span5」を使用できます。これは、たとえば「no-margin-offset5」や「offset5」でも同じように機能します。「no-margin-span.less」ファイルには、次のコードが含まれている必要があります。

#grid {
    .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) {

        .no-margin-spanX (@index) when (@index > 0) {
          (~".no-margin-span@{index}") { .no-margin-span(@index); }
          (~'.no-margin-span@{index}:first-child') { .no-margin-spanFirstChild(@index); }
          .no-margin-spanX(@index - 1);
        }
        .no-margin-spanX (0) {}

        .no-margin-offsetX (@index) when (@index > 0) {
          (~'.no-margin-offset@{index}') { .no-margin-offset(@index); }
          .no-margin-offsetX(@index - 1);
        }
        .no-margin-offsetX (0) {}

        .no-margin-offset (@columns) {
          margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth);
          *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%);
        }

        .no-margin-span (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + @fluidGridGutterWidth;
            *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%));
        }

        .no-margin-spanFirstChild (@columns) {
            width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
            *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
        }

        .row-fluid {
            [class*="no-margin-span"] {
                .input-block-level();
                float: left;
                margin-left: 0;
            }

            // generate .no-margin-spanX and .no-margin-offsetX
            .no-margin-spanX (@gridColumns);
            .no-margin-offsetX (@gridColumns);
        }
    }
}

編集-このコードをレスポンシブにするには、次のコードを「no-margin-span.less」ファイルに追加します。

@media (max-width: 767px) {
    // Make all grid-sized elements block level again
    [class*="no-margin-span"],
    .uneditable-input[class*="no-margin-span"], // Makes uneditable inputs full-width when using grid sizing
    .row-fluid [class*="no-margin-span"],
    [class*="no-margin-span"]:first-child,
    .uneditable-input[class*="no-margin-span"]:first-child, // Makes uneditable inputs full-width when using grid sizing
    .row-fluid [class*="no-margin-span"]:first-child {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        .box-sizing(border-box);
    }
    .no-margin-span12,
    .row-fluid .no-margin-span12 {
        width: 100%;
        .box-sizing(border-box);
    }
    .row-fluid [class*="offset"]:first-child {
        margin-left: 0;
    }

    // FORM FIELDS
    // -----------
    // Make no-margin-span* classes full width
    .input-large,
    .input-xlarge,
    .input-xxlarge,
    input[class*="no-margin-span"],
    select[class*="no-margin-span"],
    textarea[class*="no-margin-span"],
    .uneditable-input {
        .input-block-level();
    }
    // But don't let it screw up prepend/append inputs
    .input-prepend input,
    .input-append input,
    .input-prepend input[class*="no-margin-span"],
    .input-append input[class*="no-margin-span"] {
        display: inline-block; // redeclare so they don't wrap to new lines
        width: auto;
    }
    .controls-row [class*="no-margin-span"] + [class*="no-margin-span"] {
        margin-left: 0;
    }
}