Twitterブートストラップボタンを右揃えにするにはどうすればよいですか?


452

ここに簡単なデモがあります:

http://jsfiddle.net/HdeZ3/1/

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

順不同のリストがあり、リストアイテムごとに、左側にテキストを配置し、次に右揃えのボタンを配置します。私はプルライトを使用しようとしましたが、これは完全に整列を台無しにします。何が悪いのですか?


5
この質問にtwitter-bootstrap-3twitter-bootstrap-2だけでなく、twitter-bootstrapがタグ付けされているのはなぜですか?
Andrew Grimm 2016年

5
2013
Zim

回答:


693

pull-rightクラス属性に挿入し、ブートストラップにボタンを配置させます。

Bootstrap 2.3については、http://getbootstrap.com/2.3.2/components.html#misc>ヘルパークラス> .pull-rightを参照してください

Bootstrap 3については、https//getbootstrap.com/docs/3.3/css/#helper-classes >ヘルパークラスを参照してください。


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

pull-rightコマンドを取り出し、と交換したfloat-rightか、一般的にでfloat-{sm,md,lg,xl}-{left,right,none}


18
この答えがわかりません。質問では、サンプルコードはすでにを使用していpull-rightます。
guival

@guival私は同じことを考えていました。stackoverflow.com/a/26546770/470749は、button代わりにinputを使用すると違いが生じることを意味します。
ライアン

@ Ryanこれは入力とボタンの両方で私に
有効です

@aronadaalありがとうございます!
Houari Zegai

249

Twitterブートストラップ3で、pull-rightクラス試してください

class="btn pull-right"

4
:もう、それはV 3.1で廃止されたではないgetbootstrap.com/components/#dropdowns-alignment
ılǝ

9
変更を強調するための+1。ただし、この減価償却費は、.dropdown-menu-rightに置き換えられたドロップダウンメニューにのみ適用されます。全体としては非推奨ではありません。
ショーンベイダー

あなたは正しい、ドキュメントは言う we've deprecated .pull-right on dropdown menus
ılǝ

3
外側のbtn-group divでpull-rightを使用する必要がありました:<div class = "btn-group pull-right">
Gerfried

17
pull-rightを使用しますfloat: right。これにより、垂直方向のコンテンツを互いに折りたたみます。text-rightこのようにボタンをDIVでラップします-<div class="text-right">button...</div>
ハッシュブラウン'19年

137

「pull-right」クラスは、text-alignの代わりに「float:right」を使用するため、正しい方法ではない可能性があります。

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

いくつかのコード:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>


6
垂直方向のコンテンツが互いに折りたたまれるのを防ぎ、それを回避するためだけにマークアップを追加する必要がないため、これはプルライトよりも優れていると思います。
Tony Wall、

2
ありがとうございました。「プルライト」の問題は、ボタンから余白が削除されることです。これはマージンを維持しますが、要素を右に移動します。パーフェクト!
PRホワイトヘッド2017年

なぜtext-rightはclass="btn btn-default text-right"、ボタンの中だけでなく、このボタンを含むdivになければなりませんか???
Krystian Polska 2017

50

2019年更新-Bootstrap 4.0.0

pull-rightクラスは今あるfloat-rightブートストラップ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リストを揃えず、行にブロック要素を使用することをお勧めします。

されてfloat-rightまだ働いていませんか?

ことを覚えておいてくださいブートストラップ4が今フレキシボックスで、多くの要素があるdisplay:flex作業からフロート右を防ぐことができます。場合によっては、align-self-endまたはのようなutilクラスml-autoBootstrap 4の.row、Card、Navなどのflexboxコンテナ内の要素を右揃えするように、機能するがあります。

またtext-right、インライン要素でも機能することを忘れないでください。

ブートストラップ4の正しい例を揃える


ブートストラップ3

pull-rightクラスを使用します。


彼らは私のために働いていますが、リンクに依存する必要はありません。正しい配置方法の説明については、回答をお読みください。
ジムジュン

19

使用buttonタグの代わりinputと使用pull-rightクラス。

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

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

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

.RbtnMargin { margin-left: 5px; }

18

受け入れられた答えに加えて、ブートストラップからパディングが組み込まれているコンテナーおよび列内で作業するとき、私はときどき引き寄せを行う子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>

12

古い回答済みの質問に返信して申し訳ありませんが、jsfiddleが機能しないいくつかの理由を指摘したいと思います。他の人がチェックアウトして、受け入れられた回答に記載されているpull-rightクラスがなぜ機能しないのか疑問に思う場合そこでは働きません。

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

作業フィドル: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>

(ボタンに最小幅を追加したのは、幅が変化するため、ボタンの右揃えがぎざぎざな外観に耐えられなかったためです。))


11

Bootstrap pull-rightヘルパーを使用すると、要素float: right強制inline-block的にになるblockを使用するため、機能しませんでした。そして、.btnsがになるとblockinline-block準テキスト要素として提供していた本来のマージンが失われます。

そのため、代わりにdirection: rtl;親要素で使用しました。これにより、その要素内のテキストが右から左inline-blockにレイアウトされ、要素も右から左にレイアウトされます。次のようにLESSを使用して、子供も配置されないようにすることができますrtl

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

  * {
    direction: ltr;
  }
}

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

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

7

ではブートストラップ4:フレキシボックスでこの方法を試してみてください。getbootstrapのドキュメントを参照してください

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




2

ブートストラップCSSとは別にカスタムCSSを試して、変更がないか確認してください。試す

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

それが機能する場合、あなたはあなたが持っているものを操作するか、これに他のフォーマットを追加して、あなたが望むものを達成することを試みることができます。あなたがブートストラップを使用しているので、それがあなたが望むものをあなたに提供しないのなら、あなたはそれを管理するだけではありません。あなたは自分のコードで作業しているので、あなたが言うようにそれを行うように命令します。乾杯!


5
他の回答は必要なものがすべてブートストラップに含まれていることを示しているので、カスタムcssは必要ありません
chrisweb '31

@chriswebあなたが知らない同じCSSクラスを共有する他のプラグインがあり、競合する問題がある場合はどうしますか?カスタムCSSを作成して次に進むよりも座って見てください?OPは、同じCSSクラスを共有する可能性のある他のプラグインが追加されたかどうかを指定しませんでした。
OmniPotens 2014年

2
<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>

私はちょうどレイアウトのためにレイアウトを使用しました。

または

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

私にとって、これは両方のリスト項目を1行に配置します
deltanovember

2

空白の列を使用して左側にスペースを設けることもできます

お気に入り

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

デモ:: Jsfiddleデモ


1

ブートストラップV3.3.1以下のCSSスタイルは、この問題を解決します

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

注:上記の投稿のすべての提案を試して、すべてのバージョンが古いバージョンに対応しており、新しいセットのブートストラップバージョンに対する修正は提供していません。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.