Bootstrap 3: Nur für Spalte rechts ziehen

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

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

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

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

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.

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

}

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.

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>

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

.pull-right-xs { 
    @extend .pull-right;
 }

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

Dieses Problem wurde in Bootstrap-4-Alpha-2 gelöst.

Hier ist der Link: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

Klonen Sie es auf github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

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>

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>

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>