Aliniate la stânga și la dreapta aliniază în div în Bootstrap

2018 Update...

Bootstrap 4.1+

• trage-nu este acum float-dreapta
• `text-nu este la fel ca 3.x, și lucrează pentru elemente inline
• atât float -* " și " text-* sunt receptiv pentru diferite aliniere la diferite lățimi (de exemplu: float-sm-dreapta)

La flexbox utils (de exemplu:justifica-conținut între) poate fi de asemenea utilizat pentru aliniere:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

sau, de auto-marje (de exemplu:ml-auto) în orice flexbox recipient (rând,navbar,card,d-flex,etc...)

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 Aliniați Demo
Bootstrap 4 Dreptul de a Alinia Exemple(float, flexbox, text-dreapta, etc...)

Bootstrap 3

Folosi trage de-a dreptul de clasă..

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

Bootstrap 3 Demo

Puteți folosi, de asemenea, `text-nu clasa de genul asta:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 Demo 2

În loc de a folosi trage de-a dreptul de clasă, este mai bine să utilizați text-nu clasa în coloană, pentru căpull-nu creează probleme, uneori, în timp ce redimensionarea paginii.

<grevă>În Bootstrap 4 răspunsul corect este de a utiliza `text-xs-dreptul de clasa.

Acest lucru functioneaza pentru xs reprezintă cea mai mică dimensiunea viewport în BS. Dacă ai vrea, ai putea aplica alinierea numai atunci când fereastra este mediu sau mai mare prin utilizarea text-md-dreapta.

În cea mai recentă alpha, text-xs-nu a fost simplificat pentru atext-dreapta`.

<div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
</div>

Bootstrap v4 introduce flexbox suport

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Aflați mai multe la https://v4-alpha.getbootstrap.com/utilities/flexbox/

Putem realiza de Bootstrap 4 Flexbox:

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p>$42</p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Exemplu: [JSFiddle][1]

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">$42</div>
</div>

Asta ar trebui să facă treaba doar ok