90094


Bootstrapを使い、[このサイト](https://nllllll.com/bootstrap/bootstrap-
searchform/)を参考に検索フォームを作成した。

[code]

    <div class="input-group">
        <input type="text" id="search-form" class="form-control input-group-prepend" placeholder="キーワードを入力"></input>
        <span class="input-group-btn input-group-append">
            <submit type="submit" id="btn-search" class="btn btn-primary" onclick="clickSearch()">
                <i class="fas fa-search"></i> 検索
            </submit>
        </span>
    </div>
    
[/code]

PCでみると、  
[![PCから](https://i.stack.imgur.com/fJbmu.jpg)](https://i.stack.imgur.com/fJbmu.jpg)

このように理想通りに表示されるが、スマホ(iPhone)で見てみると、  
[![iPhoneから](https://i.stack.imgur.com/lcVKr.jpg)](https://i.stack.imgur.com/lcVKr.jpg)

このように検索ボタンの表示が崩れてしまう。  
ちなみに、これはスマホのsafariでもChromeでも同じだった。  
なぜでしょうか。お力添え願います


CC BY-SA 4.0
2022-07-18T10:16:02.367
90061
2022-07-20T01:57:32.337
2022-07-19T08:52:10.820
47787
47787
question
javascript html html5 bootstrap bootstrap4
Bootstrapの検索フォームがiPhoneで表示が崩れる


`submit` タグはサファリで表示が変わるから、bootsrapを使う場合は `submit` タグを `button`
タグにした方がいいかな。下記のコードを使ってみてください。

詳しくは以下のページも参照してください。

[Button addons - Input group ·
Bootstrap](https://getbootstrap.com/docs/4.0/components/input-group/#button-
addons)

[code]

      <div class="input-group">
            <input type="text" id="txt-search" class="form-control input-group-prepend" placeholder="キーワードを入力">
            <span class="input-group-btn input-group-append">
                <button type="submit" id="btn-search" class="btn btn-primary"><i class="fas fa-search"></i> 検索</button>
            </span>
        </div>
    
[/code]

or

[code]

    <div class="input-group">
        <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">
        <div class="input-group-prepend">
            <button class="btn btn-primary" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                </svg>
                検索
            </button>
        </div>
    </div>
    
[/code]


CC BY-SA 4.0
2022-07-20T00:15:24.230
90094
2022-07-20T01:57:32.337
2022-07-20T01:57:32.337
3060
40476
90061
answer