3

bootstrap 2.0Rails アプリ内で (gem を使用して)使用してbootstrap-sassいますが、送信ボタンをキャンセル ボタンと揃えるのに問題があります。

以下は、html.erb ファイルのフォームからのコード スニペットです。

<div class="span3">
  <%= f.submit class: "btn btn-primary" %>
  <button type="button" class="btn">Cancel</button>
</div>

生成される HTML は次のとおりです。

<input class="btn btn-primary" type="submit" value="Add Person" name="commit">
<button class="btn" type="button">Cancel</button>

そして、Firefox 14.0.1 では次のようになります。私が見ると、

位置がずれているボタンの写真

注: div に input-append を追加すると (下の図を参照) 近づくことができますが、まだ少しずれています。キャンセルはまだ少し低く、[人を追加] ボタンの右側の角が丸くなっていることに注意してください。 .

ここに画像の説明を入力

これらの 2 つのボタンを正しく配置するにはどうすればよいですか?

更新 Firefox 14.0.1 を使用しています。この問題を再現するために @Vestride によって作成された jsfiddle を見ると、次のようになります。

ここに画像の説明を入力

最初の結果には満足していますが、サイトにまったく同じコードを追加すると、同じ結果が得られません。代わりに、上記のめちゃくちゃな配置が得られます。これはどういう意味ですか？ブートストラップ用の CSS が台無しになっているのではないでしょうか?

更新 7/27 Vestride の最新の提案に応えて、フィドル Vestride から私の Firefox に表示されるボタンをまとめました。入力から送信に変更しても改善されないことに注意してください。 ここに画像の説明を入力

4

2 に答える 2

2

jsfiddle http://jsfiddle.net/Vestride/YT3sqを作成しましたが、問題を再現できませんでした。それらは私にとって完全に一致します（Chrome 21）。どのブラウザを使用していますか? btn-group2 番目の例では、コンテナー要素にクラスを追加しました。それはあなたの問題も解決するかもしれません。

編集： a を作ってみて<input />ください<button type="submit">。私のためにFirefoxで働いていました。フィドルも更新しました。

于 2012-07-25T06:28:22.743 に答える