wake-up-neo.com

Bootstrap, um anpassbare Änderungen am Layout vorzunehmen

Ich verwende ein fließendes Twitter-Bootstrap-Layout für mein Design und bin dabei, es ansprechend zu gestalten. Betrachten Sie ein Raster wie dieses:

<div class="row-fluid">
    <div class="span4"></div>
    <div class="span8"></div>    
</div>

Wie lässt sich span4 am besten ausblenden und span8 die gesamte Breite einnehmen, wenn der Bildschirm kleiner wird?

13
C. E.

Verwenden einer Medienabfrage mit beliebiger eingestellter Min-/Max-Breite .span4 bis display: none;

Fügen Sie dann .span8 zur Regel für .span12 für alles darunter hinzu, unabhängig von der Breite, in der Sie .span4 verbergen, da all diese Arbeit bereits von bootstrap erledigt wird, sodass Sie nicht duplizieren müssen. Es wird ungefähr so ​​aussehen:

@media (min-width: 320px){
    .span12,
    .span8 {
        width: 300px;
    }
}

(Das letzte Stück Code ist nur ein Beispiel, aber in Bootstraps-Gerüsten wird es etwas ähnliches geben.)

Hoffentlich hilft das :)

BEARBEITEN:

Das könnte funktionieren, ich habe es mit Dev-Tools auf der Bootstrap-Site getestet und es schien zu funktionieren. Wieder in einer Medienabfrage:

@media (min-width: 320px){

    #special .span4 {
        display: none;
    }

    #special .span8 {
        float: none;
        width: auto;
    }

}
13
will

Mit Bootstrap 2.0.2 und höher können Sie:

Ändern Sie die HTML in:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8 span12-tablet"></div>    
</div>

(Ich habe "kleiner" mit Tablet- und Telefongrößen interpretiert, verwenden Sie Ihre eigenen Definitionen für andere Größen.)

.hidden-phone und .hidden-tablet verstecken die span4 für kleinere Bildschirme.

Um diesen Speicherplatz wieder freizugeben und das span8 erneut zu überspannen, fügen Sie dies zu Ihrer CSS hinzu:

@media (max-width: 979px) {
  .span12-tablet {
    width: 91.48936170212765% !important;
    *width: 91.43617021276594% !important;
  }
}

Wenn Sie weniger verwenden, können Sie die Grid-Mixins von bootstrap verwenden:

.span12-tablet {
    @media (max-width: 979px) {
        #grid > .fluid > .span(12) !important;
    }
}

Wenn Sie Bootstrap 2.2.1 verwenden, können Sie:

Ändern Sie die HTML in:

<div class="row-fluid">
    <div class="span4 hidden-phone hidden-tablet"></div>
    <div class="span8"></div>    
</div>

Fügen Sie dies nun Ihren CSS-Überschreibungen hinzu:

@media (min-width: 768px) and (max-width: 979px) 
{
    [class*="span"],
    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
    }
}

Dies funktioniert auch für andere Spannweiten, die Sie in Ihrer HTML-Datei angegeben haben.  

diese Änderungen bewirken, dass alle Spannweiten 100% betragen, sodass das iPad im Hochformatmodus immer den 1-Säulen-Flüssigkeitsmodus verwendet.

7

Schreiben Sie so

im Telefongerät wird dieses Div verdeckt<div class="span4 hidden-phone"></div>

und dieses div zeigt <div class="span8 visible-phone"></div>

Update

Vorherige Antwort für Bootstrap 2.3

Jetzt kommt Bootstrap 3 auf den Markt.

also aktualisiere ich meine antwort für neuen benutzer → bootstrap3

im Telefongerät wird dieses Div verdeckt<div class="col-md-4 hidden-xs"></div>

und dieses div zeigt <div class="col-xs-4 visible-xs"></div>

3
asad raza

Dies wäre die beste Option, um dynamisch zu bleiben. In meinem Beispiel habe ich die Breite auf 6 Spalten neben fluidGridColumnWidth gesetzt

[class*="span"]  {
    width: 100%;

    .row-fluid {
        [class*="span"] {
            width: (@fluidGridColumnWidth * 6) + (@fluidGridGutterWidth * (6 - 1)) - (.5 / @gridRowWidth * 100 * 1%);

            float: left;
            margin-left: @fluidGridGutterWidth;

            &:first-child {
                margin-left: 0;
            }
        }
    }
}

TLDR: Verwenden Sie das zweite Code-Snippet

Bootstrap ist ein mobiles erstes Framework, daher erkläre ich es von der kleinsten Bildschirmgröße. Das Layout ist unabhängig von Haltepunkten/Bildschirmgröße immer 12 Spalten breit.

Ausgehend vom kleinsten Haltepunkt (xs - extra klein) wird der span4 ausgeblendet und der span8 nimmt die gesamte Breite (alle 12 Spalten) ein.

<div class="row-fluid">
    <div class="span4 hidden-xs"></div>
    <div class="span8 col-xs-12"></div>    
</div>

Wir sind noch nicht ganz fertig, da wir das Verhalten nicht definiert haben, wenn der nächste Haltepunkt erreicht wird (sm/small/screen width liegt über 767px). Daher wird span4 ein Drittel der Breite annehmen (12 Spalten/3 =) 4 Spalten) und der span8 nimmt den Rest der Breite (12-4 = 8 Spalten)

<div class="row-fluid">
    <div class="span4 hidden-xs col-sm-4"></div>
    <div class="span8 col-xs-12 col-sm-8"></div>    
</div>

In diesem Fall wird davon ausgegangen, dass Sie die Änderung zwischen den xs - sm - Haltepunkten vornehmen wollten.

Weiterführende Literatur:  

Wenn Sie den Wechsel zwischen sm-md (md = medium) wünschen, kann ich die Klasse visible-md verwenden, die den span4 auf den Haltepunkten medium und auf (> 992px) anzeigt.

<div class="row-fluid">
    <div class="span4 visible-md col-md-4"></div>
    <div class="span8 col-xs-12 col-md-8"></div>    
</div>
2
ono2012

gerade:

<div class="row-fluid">
   <div class="span4 hidden-desktop"></div>
   <div class="span8"></div>    
</div>
0
Daniel Faria

Ich habe mir eine kleine Variation davon ausgedacht.

Fügen Sie eine stack-tablet-Klasse zu einem row-fluid hinzu, um den Stapel auf der Tablet-Breite und nicht nur auf der Telefonbreite zu stapeln (Standardeinstellung Bootstrap):

@media (max-width: 979px) {
    .row-fluid.stack-tablet [class*="span"] {
        width: 100%;
        display: block;
        float: none;
        margin-left: 0;
    }
}

Kann zusammen mit den Anzeige- und verborgenen Klassen verwendet werden.

0
John