ここに簡単なデモがあります:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
順不同のリストがあり、リストアイテムごとに、左側にテキストを配置し、次に右揃えのボタンを配置します。私はプルライトを使用しようとしましたが、これは完全に整列を台無しにします。何が悪いのですか?
ここに簡単なデモがあります:
<ul>
<li>One <input class="btn pull-right" value="test"></li>
<li>Two <input class="btn pull-right" value="test2"></li>
</ul>
順不同のリストがあり、リストアイテムごとに、左側にテキストを配置し、次に右揃えのボタンを配置します。私はプルライトを使用しようとしましたが、これは完全に整列を台無しにします。何が悪いのですか?
回答:
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}
pull-right
ます。
Twitterブートストラップ3で、pull-rightクラスを試してください
class="btn pull-right"
we've deprecated .pull-right on dropdown menus
pull-right
を使用しますfloat: right
。これにより、垂直方向のコンテンツを互いに折りたたみます。text-right
このようにボタンをDIVでラップします-<div class="text-right">button...</div>
「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>
class="btn btn-default text-right"
、ボタンの中だけでなく、このボタンを含むdivになければなりませんか???
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-auto
Bootstrap 4の.row、Card、Navなどのflexboxコンテナ内の要素を右揃えするように、機能するがあります。
またtext-right
、インライン要素でも機能することを忘れないでください。
ブートストラップ3
pull-right
クラスを使用します。
使用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; }
受け入れられた答えに加えて、ブートストラップからパディングが組み込まれているコンテナーおよび列内で作業するとき、私はときどき引き寄せを行う子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>
古い回答済みの質問に返信して申し訳ありませんが、jsfiddleが機能しないいくつかの理由を指摘したいと思います。他の人がチェックアウトして、受け入れられた回答に記載されているpull-rightクラスがなぜ機能しないのか疑問に思う場合そこでは働きません。
<button>
代わりに要素を使用してください。作業フィドル: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>
(ボタンに最小幅を追加したのは、幅が変化するため、ボタンの右揃えがぎざぎざな外観に耐えられなかったためです。))
Bootstrap pull-right
ヘルパーを使用すると、要素float: right
が強制inline-block
的にになるblock
を使用するため、機能しませんでした。そして、.btn
sがになると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>
ではブートストラップ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>
プルプルはv3.1.0で廃止されました。頭を上げただけです。
http://getbootstrap.com/components/#callout-dropdown-pull-right
pull-right
は非推奨ですdropdown-menu
。他のコンポーネントには引き続き使用できます。
pull-right
ボタンのクラスを適用します。
http://getbootstrap.com/css/#helper-classes-floats >ヘルパークラス
このリンクが役立ちます
次に、既存の.dropdown-menu要素に.dropdown-menu-rightを追加する必要があります。pull-rightはサポートされなくなりました。詳細はこちらhttp://getbootstrap.com/components/#btn-dropdowns
ブートストラップCSSとは別にカスタムCSSを試して、変更がないか確認してください。試す
.move-rigth{
display: block;
float: 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>
私はちょうどレイアウトのためにレイアウトを使用しました。
または
<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;
}
空白の列を使用して左側にスペースを設けることもできます
お気に入り
<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デモ