Bootstrapのbtn-groupがうまく働かない

Laravelで作っているアプリで、ボタンを横一列に表示したいのですがなぜか縦に並んでしまいます。アドバイスお願いします。

簡単にコードを書くとこんな感じです

  <form action="method_2">
     <button type="submit" (省略)>
  </form>

</span> </td>

1つの<td>セル内に複数個のボタンを横並びに表示したいのですが、このコードだと縦に並んでしまいます。異なるformをまたいでいるのが原因でしょうか？それぞれ異なるメソッドに処理させたいので、複数の<form>を作る必要があります。

別のやり方はありますか？

＜追記＞
お二人の方法を試してみましたがうまくいきませんでした...

行動規範の内容に同意します

回答6件

こうすると、一列に並びました。

HTML
1<td>
2   <span class="form-inline">
3      <form action="method_1" class="btn-group">
4         <input type="hidden />
5         <button type="submit"/>
6      </form>
7      <form action="method_2" class="btn-group">
8         <input type="submit"/>
9      </form>
10  </span>
11</td>

※input type=submitの所は buttonでも横に並びました。

投稿2015/11/01 10:20

Ken.sakanakana

総合スコア1768

改行されるのはformタグがHTML4.01の時にブロックレベル要素だった名残なのかは定かではありませんが、ブラウザデフォルトでの表示がdisplay: blockになっているのが原因ではないかと思います。

単純に

css
1.btn-group > .form {
2  display: inline;
3}

とすれば、横並びにはなるかと思いますが、class名から察するにBootstrapを使用されているかと思いますが意図した表示にはならないかと予測します。

ちゃんとチェックはしていませんが、
下記のような感じで元のBootstrapのスタイルを参考にCSSを調整してあげる必要があるかと思います。

html
1<td> 
2   <span class="btn-group"> 
3      <form action="method_1" class="my_btn-group-wrapper"> 
4         <input type="hidden (省略)> 
5         <button type="submit" class="btn btn-default"> 
6      </form> 
7
8      <form action="method_2" class="my_btn-group-wrapper"> 
9         <button type="submit" class="btn btn-default"> 
10      </form> 
11   </span> 
12</td>

css
1.btn-group>.my_btn-group-wrapper {
2  position: relative;
3  float: left;
4}
5.btn-group>.my_btn-group-wrapper+.my_btn-group-wrapper {
6  margin-left: -1px;
7}
8.btn-group>.my_btn-group-wrapper:first-child {
9  margin-left: 0;
10}
11.btn-group>.my_btn-group-wrapper>.btn {
12  margin: 0;
13}
14.btn-group>.my_btn-group-wrapper:first-child:not(:last-child):not(.dropdown-toggle)>.btn {
15  border-top-right-radius: 0;
16  border-bottom-right-radius: 0;
17}
18.btn-group>.my_btn-group-wrapper:not(:first-child):not(:last-child):not(.dropdown-toggle)>.btn {
19  border-radius: 0;
20}
21.btn-group>.my_btn-group-wrapper:last-child:not(:first-child)>.btn {
22  border-top-left-radius: 0;
23  border-bottom-left-radius: 0;
24}

投稿2015/09/06 18:32

KiKiKi_KiKi

総合スコア596

横並びにしたいブロック要素の親要素に対してdisplay:flexを指定すると、均等に要素を分割することができます。

DEMO

css
1.btn-group{
2	display:-webkit-box;
3	display:-webkit-flex;
4	display:-ms-flexbox;
5	display:flex
6}
7.btn-group form{
8	-webkit-box-flex: 1;
9	-webkit-flex: 1;
10	    -ms-flex: 1;
11	        flex: 1
12}

ベンダプレフィックスの生成はpleeeaseかautoprefixerが利用できます。
このプロパティはIE10、Android4.1以上で利用できます。

参考

A Complete Guide to Flexbox | CSS-Tricks

投稿2015/11/01 09:53

編集2015/11/01 09:56

horse_n_deer

総合スコア452

Bootstrap3自体のformのインライン化はform-inlineクラスで行うことが出来ます。

ボタンによってURLを変える方法はいくつか有りますが例えば。。。こんな感じとかですね

html
1<form name="form" action="javascript:void(0);">
2  <input type="submit" onClick="return url1(this)" value="送信１">
3  <input type="submit" onClick="return url2(this)" value="送信２">
4</form>

js
1function url1(obj) {
2  obj.form.action="./url1.php"
3  obj.form.submit();
4}
5
6function url2(obj) {
7  obj.form.action="./url2.php"
8  obj.form.submit();
9}

投稿2015/11/01 09:25

fagai

総合スコア2158

Bootstrap3では、btn-groupの中に<form>を入れることは想定されていないようですね。

以下のCSSを追加すると、ボタンは横並びになります。

css
1.btn-group form {
2    display: inline;
3}

サンプルはこちら
http://jsfiddle.net/jumilla/yv9rcmkt/1/

投稿2015/10/13 09:44

編集2015/10/13 09:47

jumilla

総合スコア72

すみません、スタイルシート的なカッコの良いやり方ではありませんが、
以下の様にすると、とりあえずはボタンが横に並びます。

HTML
1<html>
2<head>
3<script>
4var postAction={"1": "method_1", "2": "method_2"};
5function btnGroupSubmit(d){
6  obj=document.forms["btm-group"];
7  obj.action=postAction[d];
8  obj.submit();
9}
10</script>
11</head>
12
13<body>
14<table>
15<td> 
16   <span class="btn-group"> 
17      <form name="btm-group">
18         <button type="button" value="hidden1" onclick="btnGroupSubmit(1)"> 
19         <button type="button" value="hidden2" onclick="btnGroupSubmit(2)"> 
20      </form> 
21   </span> 
22</td> 
23</table>
24</body>
25</html>