twitter-bootstrap - How can I get my Twitter Bootstrap buttons to right align?

Question

I have a simple demo here:

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

I have an unordered list and for each list item I wish to have text on the left and then a right aligned button. I have tried to use pull-right but this completely messes up the alignment. What am I doing wrong?

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />
<ul>
  <li>One <input class="btn pull-right" value="test"></li>
  <li>Two <input class="btn  pull-right" value="test2" </li>
</ul>

score 756 · Accepted Answer

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/#responsive を参照してください。

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

score 149 · Accepted Answer

テキスト整列の代わりに "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>

score 12 · Accepted Answer

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

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

(幅がさまざまであるため、ボタンの右揃えの不規則な外観に耐えられなかったため、ボタンに最小幅も追加しました:))

score 11 · Accepted Answer

Bootstrapヘルパーの使用は、要素を強制pull-right的ににするを使用するため、うまくいきませんでした。そして、s がになると、準テキスト要素としてそれらを提供していた自然な余白が失われます。float: rightinline-blockblock.btnblockinline-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>

score 3 · Accepted Answer

.dropdown-menu-rightここで、既存の.dropdown-menu要素に追加する必要があります。pull-rightはサポートされなくなりました。

詳細はこちらhttp://getbootstrap.com/components/#btn-dropdowns

score 2 · Accepted Answer

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

1つの方法は、リストアイテムをインラインに保つために、このスタイルをリストアイテムに適用することです。

また

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

score 2 · Accepted Answer

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

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

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

score 0 · Accepted Answer

問題は、ボタンをリストの一部として使用していることです。また、リスト項目間の垂直マージンが小さすぎてボタンを間に配置できないため、配置が乱れます。ボタンの 1 つをリストの上に配置し、別のボタンをその下に配置して、期待どおりに見えるようにします。

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

score -1 · Accepted Answer

ブートストラップ 4ドキュメント用

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

twitter-bootstrap - How can I get my Twitter Bootstrap buttons to right align?

20 に答える 20

Related

Reference