質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.03%

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

受付中

回答 6

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 6,027
退会済みユーザー

退会済みユーザー

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

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

<td>
   <span class="btn-group">
      <form action="method_1">
         <input type="hidden (省略)>
         <button type="submit" (省略)>
      </form>

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


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

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

<追記>
お二人の方法を試してみましたがうまくいきませんでした...
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 6

+1

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

単純に
.btn-group > .form {
  display: inline;
}
とすれば、横並びにはなるかと思いますが、class名から察するにBootstrapを使用されているかと思いますが意図した表示にはならないかと予測します。

ちゃんとチェックはしていませんが、
下記のような感じで元のBootstrapのスタイルを参考にCSSを調整してあげる必要があるかと思います。
<td> 
   <span class="btn-group"> 
      <form action="method_1" class="my_btn-group-wrapper"> 
         <input type="hidden (省略)> 
         <button type="submit" class="btn btn-default"> 
      </form> 

      <form action="method_2" class="my_btn-group-wrapper"> 
         <button type="submit" class="btn btn-default"> 
      </form> 
   </span> 
</td> 
.btn-group>.my_btn-group-wrapper {
  position: relative;
  float: left;
}
.btn-group>.my_btn-group-wrapper+.my_btn-group-wrapper {
  margin-left: -1px;
}
.btn-group>.my_btn-group-wrapper:first-child {
  margin-left: 0;
}
.btn-group>.my_btn-group-wrapper>.btn {
  margin: 0;
}
.btn-group>.my_btn-group-wrapper:first-child:not(:last-child):not(.dropdown-toggle)>.btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group>.my_btn-group-wrapper:not(:first-child):not(:last-child):not(.dropdown-toggle)>.btn {
  border-radius: 0;
}
.btn-group>.my_btn-group-wrapper:last-child:not(:first-child)>.btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

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

<td>
   <span class="form-inline">
      <form action="method_1" class="btn-group">
         <input type="hidden />
         <button type="submit"/>
      </form>
      <form action="method_2" class="btn-group">
         <input type="submit"/>
      </form>
  </span>
</td>
※input type=submitの所は buttonでも横に並びました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

<html>
<head>
<script>
var postAction={"1": "method_1", "2": "method_2"};
function btnGroupSubmit(d){
  obj=document.forms["btm-group"];
  obj.action=postAction[d];
  obj.submit();
}
</script>
</head>

<body>
<table>
<td> 
   <span class="btn-group"> 
      <form name="btm-group">
         <button type="button" value="hidden1" onclick="btnGroupSubmit(1)"> 
         <button type="button" value="hidden2" onclick="btnGroupSubmit(2)"> 
      </form> 
   </span> 
</td> 
</table>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

.btn-group form {
    display: inline;
}

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

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

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

function url1(obj) {
  obj.form.action="./url1.php"
  obj.form.submit();
}

function url2(obj) {
  obj.form.action="./url2.php"
  obj.form.submit();
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

DEMO

.btn-group{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex
}
.btn-group form{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1
}

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

参考
A Complete Guide to Flexbox | CSS-Tricks

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.03%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る