Twitter Bootstrap: Kein Rand zwischen den Spalten

Möchte ich entfernen Sie die Ränder zwischen den Spannweiten in der bootstrap.

Eine Idee wäre, einfach überschreiben die css-Eigenschaften mit null margin und padding.
Hier ist ein Beispiel: http://jsfiddle.net/kKEpY/3/

Ohne Ausnahme, dass der linken Spalte schwebt in die die richtige es funktionieren würde, aber ich würde es vorziehen, eine direkte bootstrap-Lösung. So funktioniert bootstrap bieten eine Eigenschaft, die löscht die Ränder der Spalten (span-fluid)?

Hinsichtlich

InformationsquelleAutor der Frage dev.pus | 2012-07-01

  1. 15

    Update : die folgende Lösung bezieht sich auf eine alte version (< 2.1) : seit v2.1 die fluid grid wird automatisch berechnet aus dem normalen raster - siehe Variablen.weniger auf github

    Um dasselbe Ergebnis zu erhalten, legen Sie @gridGutterWidth zu 0 und legen Sie die @gridColumnWidthund @gridColumns wie Sie sehen, passen.

    DortEinstellung

    • @fluidGridColumnWidth zu 8.333333333% und
    • @fluidGridGutterWidth zu 0%

    erhalten Sie dass (jsfiddle).

    Warnung : den generator zu setzen scheint die Regeln basierend auf Ihren Variablen, und die Standardeinstellungen (die ich entfernt auf der jsfiddle).

    InformationsquelleAutor der Antwort Sherbrow

  2. 5

    Ich hatte das exakt gleiche problem wie du, also hier ist, wie ich durch diese auf die aktuelle Bootstrap-version 2.3.1:

    Zuerst müssen Sie einen "nicht-Raum" - Klasse, um das übergeordnete div mit der Klasse "row" wie folgt:

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

    Dann ändern Sie Ihre css-je nach Anzahl der Elemente, die Sie in diese Zeile, wie hier:

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

    Die Mathematik für die Breite ist: 

    100 / number of elements in the row = width.

    In meinem Fall war es die 4 Elemente, so ist es: 

    100 / 4 = 25%;

    Wenn es 3 Elemente wäre es: 

    100 / 3 = 33.3333333333%;

    Wenn man mehrere Fälle in einem Projekt mit diesem Thema, möchten Sie vielleicht eine eindeutige id oder Klasse, um die css-Regel, so hat dies keine Auswirkungen auf Sie alle.

    Das ist es. Keine Notwendigkeit, erneut herunterladen der bootstrap-und der Umgang mit source-Dateien

    PS: Diese Methode funktioniert im responsive design, als auch 😉

    InformationsquelleAutor der Antwort Ronen

  3. 3

    Oben genannten Antworten sind wirklich hilfreich, aber mein Szenario ist ein wenig anders.

    Ich habe eine span4 und ein span8 div in das html der html-code ist wie folgt: 

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

    Twitter Bootstrap: Kein Rand zwischen den Spalten

    Damit zu tun, dass, sollte ich nicht nur schreiben, die margin-left auf 0, aber auch passen Sie die Breite der span4 und span8. So, hier ist der code, der arbeitet für mich:

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

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

    Danke für die inspiration!

    InformationsquelleAutor der Antwort Johnny Zhao

  4. 1

    Wollte ich mit span-Tag mit margin-und span-Tag ohne Rand in meinem HTML. Bei der Verwendung von weniger ist dies sehr einfach. Erstellen Sie einfach Ihre eigenen less-Datei, nennen Sie es so etwas wie "no-margin-span.weniger" und fügen Sie es irgendwo in den weniger code. Danach kann man mit "no-margin-span5" statt "span5" in Ihre html-Datei. Das funktioniert zum Beispiel mit "kein-Rand-offset5" und "offset5". Die "no-margin-span.weniger" Datei sollte folgenden code:

    #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);
        }
    }
}

    BEARBEITEN - damit dieser code reaktionsschnell Weg, fügen Sie den folgenden code, um die "no-margin-span.weniger" Datei:

    @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;
    }
}

    InformationsquelleAutor der Antwort pkmelee337

Schreibe einen Kommentar