Kann ich den col-md-1.5 im Bootstrap geben?

Ich möchte die Spalten in Twitter Boοtstrap anpassen.

Ich weiß, dass es im Bootstrap ein 12-Spalten-Raster gibt. Gibt es eine Möglichkeit, die Gitter so zu manipulieren, dass sie 1,5 3,5 3,5 3,5 anstelle von 3 3 3 3 haben?

Wie @ bodi0 richtig sagte , ist es nicht möglich. Sie müssen entweder das Grid-System von Bootstrap erweitern (Sie können verschiedene Lösungen suchen und finden, hier ein Beispiel mit 7 Spalten) oder verschachtelte Zeilen verwenden, z . B. http://bootply.com/dd50he9tGe .

Bei verschachtelten Zeilen erhalten Sie möglicherweise nicht immer das genaue, sondern ein ähnliches Ergebnis

<div class="row">
    <div class="col-lg-5">
        <div class="row">
            <div class="col-lg-4">1.67 (close to 1.5)</div>
            <div class="col-lg-8">3.33 (close to 3.5)</div>
        </div>    
    </div>
    <div class="col-lg-7">
        <div class="row">
            <div class="col-lg-6">3.5</div>
            <div class="col-lg-6">3.5</div>
        </div>    
    </div>
</div>

Ihre Cloud überschreibt auch einfach die Breite der Spalte ...

<div class="col-md-1" style="width: 12.499999995%"></div>

Da col-md-1ist von der Breite 8,333333333%; Multiplizieren Sie einfach 8,333333333 * 1,5 und stellen Sie es als Ihre Breite ein.

In bootstrap 4müssen Sie auch die Eigenschaften flex und max-width überschreiben:

<div class="col-md-1" style="width: 12.499999995%;
    flex: 0 0 12.499%;max-width: 12.499%;"></div>

Die kurze Antwort lautet Nein (technisch können Sie einen beliebigen Namen für die gewünschte Klasse angeben, dies hat jedoch keine Auswirkung, es sei denn, Sie definieren Ihre eigene CSS-Klasse - und denken Sie daran - keine Punkte in der Klassenauswahl). Die lange Antwort lautet erneut Nein , da Bootstrap ein reaktionsschnelles , mobiles First-Fluid-Grid-System enthält, das mit zunehmender Größe des Geräts oder des Ansichtsports entsprechend bis zu 12 Spalten skaliert .

Zeilen müssen innerhalb einer .container(festen Breite) oder .container-fluid(vollen Breite) platziert werden, um eine korrekte Ausrichtung und Polsterung zu gewährleisten.

• Verwenden Sie Zeilen, um horizontale Gruppen von Spalten zu erstellen.
• Der Inhalt sollte in Spalten platziert werden, und nur Spalten dürfen unmittelbare untergeordnete Elemente von Zeilen sein.
• Vordefinierte Rasterklassen wie .rowund .col-xs-4stehen zur schnellen Erstellung von Rasterlayouts zur Verfügung. Weniger Mixins können auch für semantischere Layouts verwendet werden.
• Spalten erzeugen durch Auffüllen Rinnen (Lücken zwischen Spalteninhalten). Dieser Abstand wird in Zeilen für die erste und letzte Spalte über den negativen Rand auf versetzt .rows.
• Rasterspalten werden erstellt, indem die Anzahl der zwölf verfügbaren Spalten angegeben wird, die Sie überspannen möchten. Zum Beispiel würden drei gleiche Spalten drei verwenden .col-xs-4.
• Wenn mehr als 12 Spalten in einer einzelnen Zeile platziert sind, wird jede Gruppe zusätzlicher Spalten als eine Einheit in eine neue Zeile umgebrochen.
• Rasterklassen gelten für Geräte mit Bildschirmbreiten größer oder gleich den Haltepunktgrößen und überschreiben Rasterklassen für kleinere Geräte. Wenn Sie beispielsweise eine .col-md-*Klasse auf ein Element anwenden , wirkt sich dies nicht nur auf dessen Stil auf mittleren Geräten aus, sondern auch auf großen Geräten, wenn keine .col-lg-*Klasse vorhanden ist.

Eine mögliche Lösung für Ihr Problem besteht darin, Ihre eigene CSS-Klasse mit der gewünschten Breite zu definieren. Nehmen wir beispielsweise an, Sie .col-half{width:XXXem !important}fügen diese Klasse den gewünschten Elementen zusammen mit den ursprünglichen Bootstrap-CSS-Klassen hinzu.

Bootstrap 4 verwendet Flex-Box und Sie können Ihre eigenen Spaltendefinitionen erstellen

Dies ist fast eine 1,5, die an Ihre eigenen Bedürfnisse angepasst werden kann.

.col-1-5 {
    flex: 0 0 12.3%;
    max-width: 12.3%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

Erstellen Sie neue Klassen, um die Breite zu überschreiben. Siehe jFiddle für Arbeitscode .

<div class="row">
  <div class="col-xs-1 col-xs-1-5">
    <div class="box">
      box 1
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 2
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 3
    </div>
  </div>
  <div class="col-xs-3 col-xs-3-5">
    <div class="box">
      box 4
    </div>
  </div>
</div>

.col-xs-1-5 {
  width: 12.49995%;
}
.col-xs-3-5 {
  width: 29.16655%;
}
.box {
  border: 1px solid #000;
  text-align: center;
}

Wie in Bootstrap 3 erwähnt, können Sie Nest / Embed-Techniken verwenden.

Es wird jedoch immer offensichtlicher, jetzt eine ziemlich großartige Funktion von Bootstrap 4 zu verwenden. Sie haben einfach die Möglichkeit, die col-{breakpoint}-autoKlassen (z. B. col-md-auto) zu verwenden, um die Spaltengröße automatisch basierend auf der natürlichen Breite des Inhalts zu bestimmen. Überprüfen Sie dies zum Beispiel

Laut der Antwort von Rex Bloom habe ich einen Bootstrap-Helfer geschrieben:

//8,33333333% col-1

.extra-col {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col-0-5 {
  @extend .extra-col;
  flex: 0 0 4.16666667%;
  max-width: 4.16666667%;
}

.col-1-5 {
  @extend .extra-col;
  flex: 0 0 12.5%;
  max-width: 12.5%;
}

.col-2-5 {
  @extend .extra-col;
  flex: 0 0 20.833333325%;
  max-width: 20.833333325%;
}

.col-3-5 {
  @extend .extra-col;
  flex: 0 0 29.166666655%;
  max-width: 29.166666655%;
}

.col-4-5 {
  @extend .extra-col;
  flex: 0 0 37.499999985%;
  max-width: 37.499999985%;
}

.col-5-5 {
  @extend .extra-col;
  flex: 0 0 45.833333315%;
  max-width: 45.833333315%;
}

.col-6-5 {
  @extend .extra-col;
  flex: 0 0 54.166666645%;
  max-width: 54.166666645%;
}

.col-7-5 {
  @extend .extra-col;
  flex: 0 0 62.499999975%;
  max-width: 62.499999975%;
}

.col-8-5 {
  @extend .extra-col;
  flex: 0 0 70.833333305%;
  max-width: 70.833333305%;
}

.col-9-5 {
  @extend .extra-col;
  flex: 0 0 79.166666635%;
  max-width: 79.166666635%;
}

.col-10-5 {
  @extend .extra-col;
  flex: 0 0 87.499999965%;
  max-width: 87.499999965%;
}

.col-11-5 {
  @extend .extra-col;
  flex: 0 0 95.8333333%;
  max-width: 95.8333333%;
}

Bootstrap verfügt über Spaltenversätze. Wenn Sie also Spalten mit gleicher Breite ohne Angabe der Größe möchten, verwenden Sie diese Option.

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Überprüfen Sie auch diesen Link https://getbootstrap.com/docs/4.0/layout/grid/#all-breakpoints

Dies ist kein Bootstrap-Standard für col-md-1.5, und Sie können bootstrap.min.css nicht bearbeiten, da dies nicht der richtige Weg ist. Sie können wie folgt http://www.bootply.com/125259 erstellen

Sie können diesen Code in col-md-3, col-md-9 verwenden

.col-side-right{
  flex: 0 0 20% !important;
  max-width: 20%;
}

.col-side-left{
  flex: 0 0 80%;
  max-width: 80%;
}

Diese Frage ist ziemlich alt, aber ich habe es so gemacht (in TYPO3).

Erstens habe ich eine eigene zugängliche CSS-Klasse erstellt, die ich für jedes Inhaltselement manuell auswählen kann.

Dann habe ich ein äußeres dreispaltiges Element mit 11 Spalten (1 - 9 - 1) erstellt und schließlich die Spaltenbreite der ersten und dritten Spalte mit CSS auf 12,499999995% geändert.