[bootstrap3] input-group で input-group-addon にサイズを指定すると全体の幅が縮む

http://bootstrap3.cyberlab.info/components/inputGroups.html

bootstrap3 の input-group を縦に並べて
addon の部分の長さを一致させようと

    .input-group-addon {
      width: calc(10em + 24px);
    }

としたら全体の幅が縮んでしまいます

グリッドで幅を決めればこのようなことはおこらないと思いますが
addon の部分は文字数がわかってるので em で指定して input が残りの幅を使うようにしたいです

どうしたらいいんでしょうか

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrapの基本テンプレート</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <style>
    .input-group-addon {
      width: calc(10em + 24px);
    }
  </style>
  <body>

    <div class="form-group">
      <div class="input-group">
        <span class="input-group-addon">テキスト</span>
        <input type="text" class="form-control" value="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">
      </div>
      <div class="input-group">
        <span class="input-group-addon">テキストテキスト</span>
        <input type="text" class="form-control">
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  </body>
</html>

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

回答1件

ベストアンサー

CSS を以下のようにすることで、質問者さんの実現したいことは行えると思います(動作確認用リンク)。

CSS
1.input-group {
2  width: 100%;
3}
4
5.input-group-addon {
6  width: calc(10em + 24px) !important;
7}

投稿2019/04/04 13:24

s8_chu

総合スコア14731

退会済みユーザー

2019/04/05 02:31

丁寧な回答ありがとうございましたまたよろしくおねがいします

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

[bootstrap3] input-group で input-group-addon にサイズを指定すると全体の幅が縮む

関連した質問