bootstrap4のinput部分をカラムいっぱいまで伸ばしたいです。

前提・実現したいこと

下記の画像の様に
input部分をカラムいっぱいまで伸ばしたいです。

発生している問題

下記の画像の様にカラムいっぱいまで伸びずに短いままです。

該当のソースコード

html
1
2
3<!doctype html>
4<html lang="ja">
5<head>
6    <!-- Required meta tags -->
7    <meta charset="utf-8">
8    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
9    <!-- Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
11          integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
12    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
13    <link rel="stylesheet" type="text/css" href="/static/css/style.css">
14    <title>Freelanze - Topページ</title>
15</head>
16<body>
17
18<!-- ナビバーデザインテストー -->
19<nav class="navbar navbar-expand navbar-dark bg-dark fixed-top">
20    <div class="row m-auto">
21        <div class="col-4 col-sm-4 order-sm-0">
22            <a class="navbar-brand" href="/">
23                <img src="media/freelanzeicon.png" width="30" height="30" class="d-inline-block align-top" alt="">
24                ほげほげ
25            </a>
26            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
27                <span class="navbar-toggler-icon"></span>
28            </button>
29        </div>
30        <div class="col-8 col-sm-8 order-sm-3">
31            <div class="float-right">
32                <button type="button" class="btn btn-primary">テスト</button>
33                <button type="button" class="btn btn-primary">ログイン</button>
34                <button type="button" class="btn btn-primary">会員登録</button>
35            </div>
36        </div>
37        <div class="col-12 col-sm-8 order-sm-1">
38            <div class="float-sm-right">
39                <form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8">
40                    <div class="form-group mb-0">
41                        <input id="form" type="search" class="col-12 form-control mr-sm-2" placeholder="キーワードで検索" name="q" aria-label="検索...">
42                    </div>
43                    <button type="submit" class="btn btn-outline-info my-2 my-sm-0">検索</button>
44                </form>
45            </div>
46        </div>
47        <div class="col-12 col-sm-4 order-sm-2">
48            <button type="button" class="btn btn-primary">カテゴリー</button>
49        </div>
50    </div>
51</nav>
52
53<main>
54</main>
55
56<!-- Optional JavaScript -->
57<!-- jQuery first, then Popper.js, then Bootstrap JS -->
58<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
59        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
60        crossorigin="anonymous"></script>
61<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
62        integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
63        crossorigin="anonymous"></script>
64<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
65        integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
66        crossorigin="anonymous"></script>
67</body>
68</html>

試したこと

htmlコードのinput部分にstyleの追加やcssによるウィブスで制御しようとしましたが、効果がありませんでした。

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

回答1件

ベストアンサー

こんにちは。

ちょっと、要素をラップしすぎのように思えますが、現状のまま、クラス指定変更だけで対応しました。
HTMLを、もう少しシンプルに書いた方がいいように思えます。

css
1        <div class="col-12 col-sm-8 order-sm-1 row">
2            <div class="float-sm-right flex-grow-1">
3                <form class="form-inline my-2 my-lg-0" action="/search" method="get" accept-charset="utf-8">
4                    <div class="form-group mb-0 flex-grow-1">