Richten Sie div in Bootstrap 3 richtig aus

Gibt es in Bootstrap 3 eine Möglichkeit, ein Div rechts auszurichten?

Ich bin mir der Offset-Möglichkeiten bewusst, aber ich möchte ein formatiertes div rechts neben seinem Container ausrichten, während es in einer mobilen Ansicht in voller Breite zentriert sein sollte. Die Klasse ‘pull-right’ funktioniert nicht mehr. Haben sie vergessen, es zu ersetzen, oder übersehe ich etwas Offensichtliches?

<div class="row">
  <div class="container">
    <div class="col-md-4">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4">
      <!-- The next div has a background color and its own paddings and should be aligned right-->
      <!-- It is now in the right column but aligned left in that column -->
      <div class="yellow_background">right content</div>
    </div>
  </div>
</div>

Shure, ich weiß, wie man das in CSS macht, aber kann es in reinem Bootstrap 3 gemacht werden?

Die Klasse Pull-Right gibt es noch in Bootstrap 3 Siehe die ‘Hilfsklassen’ hier

pull-right ist definiert durch

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

ohne weitere Informationen zu Stilen und Inhalten ist das schwer zu sagen.

Es zieht definitiv richtig hinein JSBIN
wenn die Seite breiter als 990 Pixel ist – dann greift das col-md-Styling, da Bootstrap 3 in erster Linie mobil ist.

Bootstrap 4

Beachten Sie, dass für Bootstrap 4 .pull-right durch .float-right ersetzt wurde
https://www.geeksforgeeks.org/pull-left-and-pull-right-classes-in-bootstrap-4/#:~:text=pull%2Dright%20classes%20have%20been,based%20on%20the% 20Bootstrap%20Raster.

Meinst du sowas:

HTML

<div class="row">
  <div class="container">

    <div class="col-md-4">
      left content
    </div>

    <div class="col-md-4 col-md-offset-4">

      <div class="yellow-background">
        text
        <div class="pull-right">right content</div>  
      </div>

    </div>
  </div>
</div>

CSS

.yellow-background {
  background: blue;
}

.pull-right {
  background: yellow;
}

Ein vollständiges Beispiel finden Sie unter Codepen.

Ich denke, Sie versuchen, den Inhalt innerhalb des Div rechts auszurichten, das Div mit Offset schiebt sich bereits nach rechts, hier etwas Code und LIVE-Probe:

FYI: .pull-right Schieben Sie nur das div nach rechts, aber nicht den Inhalt innerhalb des div.

HTML:

<div class="row">
  <div class="container">
    <div class="col-md-4 someclass">
      left content
    </div>
    <div class="col-md-4 col-md-offset-4 someclass">
      <div class="yellow_background totheright">right content</div>
    </div>
  </div>
</div>

CSS:

.someclass{ /*this class for testing purpose only*/
    border:1px solid blue;
    line-height:2em;
}

.totheright{ /*this will align the text to the right*/
  text-align:right;
}

.yellow_background{
    background-color:yellow;
}

Noch eine Modifikation:

...
<div class="yellow_background totheright">
  <span>right content</span>
  <br/>image also align-right<br/>
  <img width="15%" src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
...

hoffe es löst dein Problem

Bootstrap 4+ hat dafür Änderungen an den Nutzungsklassen vorgenommen. Von dem Dokumentation:

Hinzugefügt .float-{sm,md,lg,xl}-{left,right,none} Klassen für responsive Floats und entfernt .pull-left und .pull-right da sie überflüssig sind .float-left und .float-right.

Verwenden Sie also die .float-right (oder eine entsprechende Größe wie z .float-lg-right) Anstatt von .pull-right für Ihre richtige Ausrichtung, wenn Sie eine neuere Bootstrap-Version verwenden.

Hinzufügen offset8 zu deiner Klasse, zum Beispiel:

<div class="offset8">aligns to the right</div>