Bootstrap 3: Nur für Spalte rechts ziehen

127

Neu in Bootstrap 3 .... In meinem Layout habe ich:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

Ich möchte, dass die 'Elemente 2' NICHT direkt auf kleineren als farbigen Bildschirmen ausgerichtet werden. So effektiv, dass die Klasse nur für col-lg-6 nach rechts zieht ...

Wie könnte ich das erreichen?

Hier ist eine Geige: http://jsfiddle.net/thibs/Y6WPz/

Danke

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 Thibs
quelle
3
Scheint, als ob dies eine unterstützte Funktion in Bootstrap 4 sein könnte
eggy
Das ist jetzt eine Sache in Bootstrap 4 . Verwenden Sie einfach order-lg-1, order-lg-2, etc.on Ihre Spalten.
Limfinity

Antworten:

156

Sie können "Element 2" in eine kleinere Spalte (dh :) einfügen col-2und dann pushnur auf größeren Bildschirmen verwenden:

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

Demo: http://bootply.com/88095

Eine andere Möglichkeit besteht darin, den Float der .pull-rightVerwendung einer @ media-Abfrage zu überschreiben .

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Eine weitere Möglichkeit besteht darin, eine eigene .pull-right-lgCSS-Klasse zu erstellen .

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

AKTUALISIEREN

Bootstrap 4 enthält reaktionsfähige Floats . In diesem Fall würden Sie nur verwenden float-lg-right.
Es wird kein zusätzliches CSS benötigt .

Bootstrap 4 Demo

Zim
quelle
danke dafür, aber der Inhalt muss die vollen 6 Spalten verwenden, sonst wird er umbrochen, was wir nicht wollen.
Thibs
Ich hatte gehofft, keine Medienabfrage zu haben, aber es wird reichen. Vielen Dank
Thibs
28

Probieren Sie dieses WENIGER-Snippet aus (es wurde aus den obigen Beispielen und den Medienabfrage-Mixins in grid.less erstellt). 

@media (min-width: @screen-sm-min) {
.pull-right-sm {
  float: right;
}
}
@media (min-width: @screen-md-min) {
.pull-right-md {
  float: right;
}
}
@media (min-width: @screen-lg-min) {
.pull-right-lg {
  float: right;
}
}
Mark P.
quelle
Grabe diese Lösung ty!
Pez
3
Dies sollte in Bootstrap hinzugefügt werden.
Lorem Ipsum Dolor
20 
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
    float: right;
}

.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
    float: left;
}
@media (max-width: 767px) {    
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}
Koks
quelle
Schön, das sollte Teil des Standard-Bootstraps sein!
Owen
12

Es ist nicht erforderlich, eine eigene Klasse mit Medienabfragen zu erstellen. Bootstrap 3 verfügt bereits über eine Float-Reihenfolge für Medien-Haltepunkte unter Spaltenreihenfolge: http://getbootstrap.com/css/#grid-column-ordering

Die Syntax für die Klasse ist , col-<#grid-size>-(push|pull)-<#cols>wo <#grid-size>ist xs, sm, md oder lg und <#cols>ist , wie weit die verschobene Spalte für die Rastergröße zu bewegen. Drücken oder Ziehen ist natürlich links oder rechts.

Ich benutze es die ganze Zeit, damit ich weiß, dass es gut funktioniert.

Quinn
quelle
3

Funktioniert auch gut:

/* small screen portrait */

@media (max-width: 321px) {

  .pull-right { 
    float: none!important; 
  }

}


/* small screen lanscape */

@media (max-width: 480px) {

  .pull-right {
    float: none!important; 
  }

}
Greg
quelle
3

Durch Hinzufügen des unten gezeigten CSS zu Ihrer Bootstrap 3- Anwendung wird die Unterstützung für aktiviert

pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right

Klassen, die genau wie die neuen funktionieren

float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right

Klassen, die in Bootstrap 4 eingeführt wurden:

@media (min-width: 768px) {
    .pull-sm-left {
        float: left !important;
    }
    .pull-sm-right {
        float: right !important;
    }
    .pull-sm-none {
        float: none !important;
    }
}
@media (min-width: 992px) {
    .pull-md-left {
        float: left !important;
    }
    .pull-md-right {
        float: right !important;
    }
    .pull-md-none {
        float: none !important;
    }
}
@media (min-width: 1200px) {
    .pull-lg-left {
        float: left !important;
    }
    .pull-lg-right {
        float: right !important;
    }
    .pull-lg-none {
        float: none !important;
    }
}
.pull-none {
    float: none !important;
}

Abgesehen davon fügt es hinzu

pull-{ε|sm-|md-|lg-}none

der Vollständigkeit halber kompatibel mit

float-{ε|sm-|md-|lg-|xl-}none

von Bootstrap 4.

krächzen
quelle
2

Für diejenigen, die an der Textausrichtung interessiert sind, besteht eine einfache Lösung darin, eine neue Klasse zu erstellen:

.text-right-large {
    text-align: right;
}
@media (max-width: 991px) {
    .text-right-large {
        text-align: left;
    }
}

Fügen Sie dann diese Klasse hinzu:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right-large">
        elements 2
    </div>
</div>
jchavannes
quelle
2

Mit Sass ist es sehr einfach. Verwenden Sie einfach @extend:

.pull-right-xs { 
    @extend .pull-right;
 }
Rogerio Orioli
quelle
1

Das ist was ich benutze. ändere @ screen-md-max für andere Größen

/* Pull left in lg resolutions */
@media (min-width: @screen-md-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}
aWebDeveloper
quelle
1

Verwenden Sie einfach die Responsive Utility-Klassen von Bootstrap!

Die beste Lösung für diese Aufgabe ist die Verwendung des folgenden Codes:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right">
        <div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
            elements 2
        </div>
    </div>
</div>

Das Element wird nur auf lgBildschirmen nach rechts ausgerichtet. Im Übrigen wird das displayAttribut so eingestellt, blockwie es für das divElement standardmäßig ist. Bei diesem Ansatz wird text-rightanstelle des übergeordneten Elements eine Klasse verwendet pull-right.

Alternative Lösung:

Der größte Nachteil ist, dass der darin enthaltene HTML-Code zweimal wiederholt werden muss.

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right visible-lg">
            elements 2
         </div>
         <div class="hidden-lg">
            elements 2
         </div>
    </div>
</div>
Luke
quelle
1

Sie können Push und Pull verwenden, um die Spaltenreihenfolge zu ändern. Sie ziehen eine Säule und die andere bei großen Geräten:

<div class="row">
    <div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
    <div class="col-lg-6 col-md-6 col-lg-push-6">
         <div>
            elements 2
         </div>
    </div>
</div>
Carlos Ucha
quelle
0

Fügen Sie jetzt Bootstrap 4 hinzu:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');

und Code sollte so sein:

<div class="row">
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">
         <div class="pull-lg-right pull-xl-right">
            elements 2
         </div>
    </div>
</div>
Vasile
quelle