bootstrap3 input と buttonを横一列で表示する。

Question

###前提・実現したいこと
bootstrap3

お世話になります。いつもありがとうございます。

今回は、下記画像のように、inputとbuttonを横一列に
表示したく、悩んでおります。
タグをいろいろ追加したり、場所変えたりしてみましたが、
一向に変わらず。
下記画像の下のようにしたいのですが、可能なのでしょうか？

###発生している問題・エラーメッセージ

###該当のソースコード

<form class="form-horizontal">
	<div class="container">
		<div class="row">
			<div class="col-xs-12 col-sm-2">
			~~~中略~~~
				<div class="form-inline">
					<div class="input-group col-xs-12 hidden-xs">
						<span class="input-group-addon">写真  <i class="glyphicon glyphicon-paperclip"></i></span>
						<input type="file" name="photo" id="photo" class="form-control">
						<button type="button" class="btn btn-default" aria-label="Left Align">
							<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
						</button>
					</div>
				</div>
			~~~中略~~~
			</div>
		</div>
	</div>
</form>

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Comments

[aKusano]

画像が表示されていないようです。

[tsuru0508]

指摘ありがとうございます。前も失敗して・・・
今は、表示されております。よろしくお願いします。

Answer 1

このページの中ほどにある「両サイドに配置」っていうのをベースにスタイルをカスタマイズしたら
できるんじゃないでしょうか？
Bootstrap日本語リファレンス

Comments

[tsuru0508]

回答ありがとうございます。
ばっちりできました。

Answer 2

aKusano様のアドバイスとおり、<span>でくくったら実現できました。
ありがとうございました。

<div class="form-inline">
	<div class="input-group col-xs-12 hidden-xs">
		<span class="input-group-addon">写真  <i class="glyphicon glyphicon-paperclip"></i></span>
		<input type="file" name="photo" id="photo" class="form-control">
		<span class="input-group-btn">
			<button type="button" class="btn btn-default" aria-label="Left Align">
				<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
			</button>
		</span>
	</div>
</div>

Answer 3

こちらに記述されています。
Bootstrap Overview Inline form

add-on ですか。
input type='file' にはスタイルを設定できませんから、他の実装方法にするしかないですね。

Comments

[tsuru0508]

ありがとうございました。英語、ちゃんと読める様にならないと
ダメですよね・・・

[退会済みユーザー]

いちおう、他のブラウザで確認しておいたほうがいいですよ。file の場合は厄介ですので。

[tsuru0508]

確かに・・・FireFoxでは崩れていますね。
操作できるので、とりあえず・・・ありがとうございました。