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

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

ただいまの
回答率

90.48%

  • Bootstrap

    1336questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

submitボタンの幅を狭くしたい

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,905

Shusuke_Ishige

score 178

実現したいこと

Rails4 と twitter-bootstrap-rails を用いて
登録フォームを作成しています。
テキストボックスの右端に合うように、
送信(submit)ボタンの幅を狭くしたいです。

発生している問題

フォームを表示すると、下記スクリーンショットのように
テキストボックスの右端と送信ボタンの右端が合っていません。
登録フォーム

該当のソースコード

各フォーム要素の幅は、次のように指定しています。

ラベル:3列
テキストボックス:8列
ボタンの左の余白:1列
送信ボタンボタン:9列

送信ボタンには
.col-xs-offset-1 と col-xs-9 を指定しています。

app/views/logs/_form.html.haml

= form_for @log, html: { class: "form form-horizontal log" } do |f|
  .form-group
    = f.label :tag_id, class: 'control-label col-xs-3'
    .col-xs-8
      = f.text_field :tag_id, class: 'form-control', required: true
    = f.error_span(:tag_id)
  .form-group
    = f.label :spent_money, class: 'control-label col-xs-3'
    .col-xs-8
      = f.text_field :spent_money, class: 'form-control', required: true
    = f.error_span(:spent_money)
  .form-group
    = f.label :spent_min, class: 'control-label col-xs-3'
    .col-xs-8
      = f.text_field :spent_min, class: 'form-control', required: true
    = f.error_span(:spent_min)
  .form-group
    .col-xs-offset-1.col-xs-9
      = f.submit nil,class: 'btn btn-primary'
      = link_to t('.cancel', :default => t("helpers.links.cancel")), logs_path, :class => 'btn btn-default'

出力されるHTML

<!DOCTYPE html>
<html>
<head>
  <title>Kirokki</title>
  <link rel="stylesheet" media="all" href="/assets/bootstrap_and_overrides-c2e5f2174c24bf7f70f3cb4bef76ec54.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/logs-2be930bcbfd3c3e00190e2193dda5c7c.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/scaffolds-50af87d3e970d9d16cd6035801dbf58e.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/tags-2be930bcbfd3c3e00190e2193dda5c7c.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application-81e2723840d0f2bb54da1711cf4a327e.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery-4075e3b7b3964707c653f61b66f46dec.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs-f9f4ae336c0d19804775e0e2c8749423.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/transition-7e969397aa4aeb9edce3bd6338a21bb3.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/alert-10c6f793bc3d34f340aa9272094c5ca9.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/modal-fe4b517f271b1d91915194f12f63cff9.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/dropdown-f267e9916ed3e3b28fa032d6916a0731.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/scrollspy-842ae2a2dfea22ec61bd7e7d698a5448.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/tab-b28e0437c0c6b346996dce8349b74eeb.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/tooltip-3af267649e491a0cedadb067a1166007.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/popover-c941b3d9bda94494d7246fb2128f5849.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/button-dcb796a85b94459a4688e8f6c5478f55.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/collapse-d4b44ff23ad23ecc8fc79a89a49d18a7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/carousel-327c240c988622e3820e6c0662268f0b.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap/affix-2eb3924077af17fc0f55273b472c559d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/twitter/bootstrap-966618b27457f91db864465b6a1de836.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks-77f8b4b6e967c75ea6d51a6913f2ec6f.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/bootstrap-0c4fcaf25e0a90c148a8d7da4539fc68.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/logs-509f70663e610c9753790466625945d5.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/tags-efb295073c1180dd105f5e8b3463490c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application-46f8f0af6641cd6a413e0fa3d30cef54.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="zhZ/gHveWbfHGoOtzV/+rO2KivMzTIBEDw8LxpfPrZ2DFY4mDuNfiFhHfrUaRwAQrAub7Q+Q02VTWv0MGN7RZg==" />
</head>
<body>
<a href="/logs">記録</a>
<a href="/tags">タグ</a>
<div class='page-header'>
  <h1>Edit 記録</h1>
</div>
<form class="form form-horizontal log" id="edit_log_65" action="/logs/65" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="54WNfylzu1N5So3rKU2gyaQn3nM0r8C8uxGWmJ2rEGGqhnzZXE69bOYXcPP+VV515abPbQhzk53nRGBSErpsmg==" />  <div class='form-group'>
    <label class="control-label col-xs-3" for="log_tag_id">Tag</label>
    <div class='col-xs-8'>
      <input class="form-control" required="required" type="text" value="2" name="log[tag_id]" id="log_tag_id" />
    </div>

  </div>
  <div class='form-group'>
    <label class="control-label col-xs-3" for="log_spent_money">支払金額</label>
    <div class='col-xs-8'>
      <input class="form-control" required="required" type="text" value="300" name="log[spent_money]" id="log_spent_money" />
    </div>

  </div>
  <div class='form-group'>
    <label class="control-label col-xs-3" for="log_spent_min">支払時間(分)</label>
    <div class='col-xs-8'>
      <input class="form-control" required="required" type="text" value="60" name="log[spent_min]" id="log_spent_min" />
    </div>

  </div>
  <div class='form-group'>
    <div class='col-xs-offset-1 col-xs-8'>
      <input type="submit" name="commit" value="更新する" class="btn btn-primary" />
      <a class="btn btn-default" href="/logs"><span class="translation_missing" title="translation missing: ja.helpers.links.cancel">Cancel</span></a>
    </div>
  </div>
</form>


</body>
</html>

試したこと

送信ボタンに指定する col-xs を 9から 8 に変更

ボタンの幅を狭くするために値を変更しましたが、
幅を変えることはできませんでした。

.form-group
    .col-xs-offset-1.col-xs-8
      = f.submit nil,class: 'btn btn-primary'
      = link_to t('.cancel', :default => t("helpers.links.cancel")), logs_path, :class => 'btn btn-default'


col-xs が 8の場合

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

使用しているブラウザと表示設定
FireFox DeveloperEdition 48.0a2
レスポンシブデザインモード 320x480

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • yuji38kwmt

    2016/06/12 10:41 編集

    問題となっている画面のHTMLコードも載せてください。
    Firefoxならば、右クリックから「ページのソースの表示」でHTMLを確認できます。

    キャンセル

  • Shusuke_Ishige

    2016/06/12 11:27

    ご指摘ありがとうございます。HTMLを追加しました。

    キャンセル

回答 4

checkベストアンサー

+1

cssのどこかでinputにwidth:100%;が設定されているんでしょうね..

<a type="submit" class="btn btn-primary">更新する</a>

..ってしてみてはどうでしょう?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/12 12:32

    ありがとうございます。
    試してみたところ、ボタンの幅はかなり狭くなりましたが
    画面全体の幅の5分の1くらいになってしまいました。

    yuji38kwmt さんから教えていただいた URLを見たところ、
    確かに Bootstrap はデフォルトで width: 100% が設定されているようなので、
    そこを考慮してスタイルを当てる必要がありそうです。

    キャンセル

  • 2016/06/12 12:41

    >画面全体の幅の5分の1くらいになってしまいました。
    aタグがデフォルトのpaddingになったって事ですよね..

    あとは 「<a type="submit" 」にidなりサブクラスなりを振って(もしくはインラインで)お好みの幅にスタイルを定義すればいいんじゃないですか?^^

    キャンセル

  • 2016/06/12 15:01

    ありがとうございます。
    試しにインラインで width=100% としたところ、
    意図した表示にすることができました。

    試した結果を元に、CSSを修正することで
    button タグのまま実現できないかどうか試してみます。

    キャンセル

+1

 力技でボタンの右端を合わせる方法

sumitボタンにCSSのwidthプロパティで調整すれば、右端を合わせることができます。
が、レスポンシブデザインではないので、あまり良い方法ではありません。

 Bootstrapのクラスで合わせる方法

まずcol-xsクラスの使い方が間違っています。

  • col-xsクラスを付与した要素の親要素には、rowクラスを付ける必要がある。
  • 行単位でrowクラスを付ける必要がある
  • ボタンの右端を合わせるなら、submit要素にcol-xs-10を指定する必要がある。テキストボックスの行がlabel:3、text:8で計11列占めているので、submit要素の部分も同様にoffset:1, submit:10の計11列を占めなくてはいけない。

http://getbootstrap.com/css/#forms

 対応方法

まずは以下の方法で試してください。

  • <div class='form-group'>rowクラスを付与する
  • submit要素にcol-xs-10クラスに変更する
  • <div class='form-group'>を追加して、そこにキャンセルボタンを配置する

他のレイアウト部分は崩れるかもしれませんが、submitボタンの右端は揃うと思います。

 原因調査方法

上記の方法でもダメでしたら、ブラウザの開発ツールを使って1個ずつ調査していきましょう。
Firefoxならばツール、Web開発、インスペクタを開き、対象要素の領域を確認してください。

  1. submit要素の親要素であるdiv要素の右端と、テキストボックスの親要素であるdiv要素の右端が同じか。まずは<div class='form-group'>の右端をそろえる必要があります。
  2. submit要素の右端は、div要素の右端を越えていないか?submit要素のwidthプロパティを確認してください。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/12 12:21

    ありがとうございます。
    教えていただいた方法を試してみましたが、
    submitボタンの右端は修正前と変わりません。

    教えていただいたURL
    http://getbootstrap.com/css/#forms
    をこれから読んでみます。
    もしかしたら、フォームのCSSを根本的に変える必要があるかもしれません。

    キャンセル

  • 2016/06/12 12:35

    原因調査方法を回答に追加しました。試してみてください。

    キャンセル

  • 2016/06/12 13:35

    ありがとうございます。
    インスペクタで要素の位置や大きさを確認してみました。

    submit要素の親要素であるdiv要素の右端と、テキストボックスの親要素であるdiv要素の右端は同じでした。

    また、submit要素の右端は、div要素の右端を越えていませんでした。

    col-xs の指定値が効いていないようなので、
    列数の基準値を12として、数値を再指定してみます。

    キャンセル

0

イメージ説明
col-xs-offset-1 なので、ひとまず画面幅を押し広げている要素がありそうです。
デベロッパーツールで要素を一つずつ減らして状態を確認してみてはいかがでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/12 15:20

    ありがとうございます。
    今後レイアウト調整をする際、教えていただいた方法を試してみます。

    キャンセル

0

原因と解決方法:
CSS で width: 300px を指定していたことが原因でした。
指定した列数いっぱいに表示するために、width: 100% を指定することで解決しました。

app/assets/stylesheets/scaffolds.css.scss 修正前(一部抜粋)

select, input {
  display: block;
  height: 80px;
  width: 300px;
}


app/assets/stylesheets/scaffolds.css.scss 修正後(一部抜粋)

select, input {
  display: block;
}

.wide-button {
  width: 100%;
}

修正後の画面
修正後の画面

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • Bootstrap

    1336questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。