Twitter Bootstrapのボタンを右寄せにするにはどうすればよいですか？

class属性にpull-rightを挿入して、bootstrapにボタンを配置させる。

Bootstrap 2.3**については、http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-rightをご参照ください。

Bootstrap 3**については、https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classesを参照してください。

Bootstrap 4**については、https://getbootstrap.com/docs/4.0/utilities/float/#responsive を参照してください。

pull-rightコマンドは削除され、float-rightまたは一般的にはfloat-{sm,md,lg,xl}-{left,right,none}`に置き換えられました。

Twitterのブートストラップ3でクラスプルライトを試してください。

class="btn pull-right"

テキスト揃えの代わりに「float:right」を使用しているため、「pull-right」クラスは正しい方法ではない場合があります。

ブートストラップ3 cssファイルを確認したところ、457行目に「text-right」クラスが見つかりました。 このクラスは、テキストを右に揃える正しい方法である必要があります。

いくつかのコード:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            Default
        </div>
    </div>
</div>

< / div>。

2019年更新-ブートストラップ4.0.0 。

ブートストラップ4の「プルライト」クラスは「フロートライト」になりました。..

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb。

ulリストを揃えず、行にブロック要素を使用しない方がよいでしょう。

「フロートライト」はまだ機能していません?。

Bootstrap 4はflexbox になり、多くの要素は display:flexであり、float-rightが機能しないようにすることができます。 場合によっては、「align-self-end」や「ml-auto」などのutilクラスは、Bootstrap 4 .row、Card、Navなどのフレックスボックスコンテナー内にある要素を正しく調整します。

また、「text-right」は引き続きインライン要素で機能することを覚えておいてください。

Bootstrap 4は正しい例を調整します。

ブートストラップ3 。

「プルライト」クラスを使用します。

「入力」の代わりに「ボタン」タグを使用し、「プルライト」クラスを使用します。

pull-rightクラスは両方のボタンを完全に台無しにしますが、右側にカスタムマージンを定義することでこれを修正できます。

Save
Cancel

次に、クラスに次のCSSを使用します。

.RbtnMargin { margin-left: 5px; }

受け入れられた回答に加えて、ブートストラップからパッドが組み込まれているコンテナと列内で作業する場合、私は時々、引きを行うための引きを行う子供divを備えた完全に伸ばされた列を持っています。

。

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

または、すべての列をグリッド列の総数(デフォルトでは12)に追加し、最初の列をオフセットします。

。

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

既に回答済みの古い質問に回答して申し訳ありませんが、他の人が確認して、受け入れられた回答で説明されているプルライトクラスが機能しない理由をいくつか指摘したいと思います。そこでは機能しません。

1。 bootstrap.cssファイルへのURLが無効です。 (おそらく、質問したときに機能しました)。 2。 属性:type = "button"を入力要素に追加する必要があります。そうしないと、ボタンとしてレンダリングされず、入力ボックスとしてレンダリングされます。 さらに良いことに、代わりに < button>要素を使用してください。 3。 さらに、プルライトはフロートを使用するため、各LIにはボタンの高さに対応するのに十分な高さがないため、ボタンレイアウトの驚異的な数が得られます。 LIにラインハイトまたはミンハイトのcssを追加すると、それに対処できます。

作業フィドル:http://jsfiddle.net/3ejqufp6/。

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(幅が異なるため、ボタンに不規則な右揃えの外観の外観が我慢できなかったため、ボタンに最小幅を追加しました:))。

ブートストラップ「プルライト」ヘルパーの使用は、「フロート:ライト」を使用するため、私たちには効果がありませんでした。[「インラインブロック」要素を「ブロック」に強制します](http://www.w3.org/ TR / CSS2 / visuren.html#dis-pos-flo)。 そして、 。btnsが blockになると、 inline-blockが準テキスト要素として提供していた自然なマージンを失います。

そこで代わりに、親要素に「方向:rtl;」を使用しました。これにより、その要素内のテキストが右から左にレイアウトされ、「インラインブロック」要素も右から左にレイアウトされます。 次のようなLESSを使用して、子供が「rtl」に配置されるのを防ぐことができます。

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

そしてそれを次のように使用します。

<div class="btn-container-right">
    Click Me
</div>

Bootstrap 4 :Flexboxでこの方法を試してください。 getbootstrapのドキュメントを参照してください。

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      Example 1
      Example 2
    </div>
  </div>
</div>

ボタンに「プルライト」クラスを適用します。 http://getbootstrap.com/css/#helper-classes-floats ->ヘルパークラス。

このリンクが役立ちます。

プルライトはv3.1.0で減価償却されました。 . 頭を上げるだけ。

http://getbootstrap.com/components/#callout-dropdown-pull-right。

<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

Layout...li.のスタイル適用を使っただけです。

*(´・ω・)(・ω・｀*)ネー

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

CSS において

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

ブートストラップCSSの脇にカスタムCSSを入れてみて、何か変化があるかどうか確認してみてください。試す

.move-rigth{
    display: block;
    float: right;
}

もしうまくいったら、今あるものを操作してみたり、他のフォーマットを追加してみたりして、あなたが望むものを実現することができます。bootstrapを使用しているからと言って、もしそれがあなたの望むものを提供しないのであれば、あなたはそれを管理するだけでいいということにはなりません。あなたは自分のコードで作業しているのですから、あなたの言うとおりにするように命令するのです。 ありがとうございます！

次に、既存の.dropdown-menu要素に.dropdown-menu-rightを追加する必要があります。 pull-rightはサポートされなくなりました。 詳細については、http://getbootstrap.com/components/#btn-dropdownsをご覧ください。

空白の列を使用して、左側にスペースを与えることもできます。

お気に入り。

<div class="row">
    <div class="col-md-8"></div>  
        <div class="col-md-4">
            Save
        </div>
</div>

デモ:: [Jsfiddleデモ][1]。

Bootstrap V3.3.1 から、次のCSSスタイルがこの問題を解決します。

.modal-open{
    padding-right: 0 !important;
}

注:上記の投稿とすべてのアドレスの古いバージョンのすべての提案を試しましたが、ニューセットブートストラップバージョンの修正は提供していません。

ブートストラップ4 [ドキュメント][1]用。

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>

[1]:https://v4-alpha.getbootstrap.com/layout/grid/#horizo ntal-alignment。