web-dev-qa-db-ja.com

Twitterのブートストラップボタンを正しく配置するにはどうすればよいですか。

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

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>

私は順不同のリストを持っていて、それぞれのリスト項目について、私は左側にテキストを、そして次に右側に整列されたボタンを持ちたいです。私はpull-rightを使おうとしました、しかしこれは整列を完全にめちゃくちゃにします。何がおかしいのですか？

twitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-2
422
deltanovember

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

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

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

ブートストラップ4 については、 https://getbootstrap.com/docs/4.0/utilities/float/#responsive を参照してください。

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

621
aronadaal

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

class="btn pull-right"
246
Shawn Vader

inでtext-alignの代わりに "float：right"を使用するため、 "pull-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>

125
César León

アップデート2018 - ブートストラップ4.0.0

Bootstrap 4ではpull-rightクラスはfloat-rightになりました...

    <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はまだ動作していませんか？

Bootstrap 4がflexbox になり、多くの要素がdisplay:flexになるため、float-rightが機能しなくなる可能性があります。場合によっては、align-self-endやml-autoのようなutilクラスは、Bootstrap 4の.row、Card、Navのようなflexboxコンテナの中にある要素を正しく整列させるように動作します。

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

ブートストラップ4は正しい例を揃えます

ブートストラップ3

pull-rightクラスを使用してください。

34
Zim

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; }
19
Shehzad Mehmood

受け入れられた答えに加えて、ブートストラップからパディングを組み込んでいるコンテナとコラムの中で作業するとき、私は時々行く道であることを引っ張ることをする子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>
17
yuvilio

以前の回答済みの質問に返信して申し訳ありませんが、jsfiddleが機能しない理由がいくつかあることを指摘しておくと思います。そこでは働きません。 

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

（幅が異なるため、ボタンが右寄せでぼやけて見えるのに耐えられないため、ボタンに最小幅も追加しました:)

12
Allan Nienhuis

Bootstrap pull-rightヘルパーの使用は、float: rightを使用するため機能しませんでした。これは inline-block要素をblock に強制します。また、.btnsがblockになると、inline-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>
11
Carl G

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

このリンクは役立ちます

4
Abhijit Kulkarni

プルプルはv3.1.0の時点では廃止されました。

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

3
n1nja

空白の列を使って左側にスペースを入れることもできます。 

好き 

<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デモ

2
user889030
<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;
}
2
sasi

変更があるかどうかを確認するために、ブートストラップCSSとは別にカスタムCSSを試すことができますか。やってみる

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

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

2
OmniPotens

今度は既存の.dropdown-menu要素に.dropdown-menu-rightを追加する必要があります。 pull-rightはもうサポートされていません。詳細はこちら http://getbootstrap.com/components/#btn-dropdowns

2
Dan Ochiana

ブートストラップ4 ：Flexboxでこの方法を試してください。 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>
0
Shahriyar Ahmed

Bootstrap V3.3.1 以下のCSSスタイルはこの問題を解決します

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

注：私は上記の記事のすべての提案を試し、すべての古いバージョンに対処し、newsetブートストラップバージョンに対する修正を提供しません。 

0
Uri Lukach