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

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

ただいまの
回答率

87.59%

Bootstrap4で検索窓を固定したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,349

score 20

前提・実現したいこと

実現したいこと

  • スクリーンのサイズに関わらず検索窓の位置を固定
  • 検索窓はロゴ(トグル)に次いで左寄せにする
  • 検索窓の中に文字(検索など)または虫眼鏡記号を入れる

実現したいイメージ

イメージ説明
上の画像の検索窓はスクリーンサイズに関わらず、固定です。

※イメージはこちらのサイトのナビゲーションのような感じです。

該当のソースコード

<body>
    <header>

      <!-- nav -->
      <nav class="navbar navbar-expand-xl navbar-dark bg-primary">

        <!-- navbar-toggler -->
        <button class="navbar-toggler" type=button data-toggle="collapse" data-target="#testnav" aria-controls="testnav" aria-expanded="false" aria-label="Toggle navigation">
          <img src="img/f_f_object_174_s64_f_object_174_2bg.png">
        </button><!-- /navbar-toggler -->

        <!-- navbar-collapse -->
         <div class="collapse navbar-collapse" id="testnav">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">新規登録</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">データ一覧</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">エクスポート</a>
                </li>
            </ul>
        </div><!--navbar-collapse-->

        <form class="form-inline mr-auto">
           <input class="form-control mr-sm-2" type="search" aria-label="Search">
           <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search </button>
        </form>

      </nav><!--/nav-->
   </header>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

試したこと

配置まではできたのですが、これが最適なのかわかりません。検索窓の固定と検索窓内に文字を入れることはできていません。

まだ初心者なので、初歩的な質問で申し訳ないのですが、ご返答お願いいたします。

問題が発生した環境

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/03/12 16:33

    > リスト番号リストリストスクリーンのサイズに関わらず検索窓の位置を固定
    上記、何がしたいのか良く分かりません。文章ミスってませんか?
    実現したい状態を図示いただいた方がいいかもしれません。

    キャンセル

  • ironman

    2019/03/12 16:36

    本当ですね。ありがとうございます。再度訂正いたしました。

    キャンセル

  • ironman

    2019/03/12 16:37

    図示は少しお待ちください。

    キャンセル

回答 1

checkベストアンサー

+1

スクリーンのサイズに関わらず検索窓の位置を固定 
検索窓はロゴ(トグル)に次いで左寄せにする 

今でもできてませんか?
「固定」だけでいうとposition:fixedかと思いましたが、単にそこに置いておくということですね。
ただ、位置は固定でもbreakpointで伸び縮みはしてますね。
そのあたりはレスポンシブなのでBootStrapで対応可能かと(たぶんform関係)

検索窓の中に文字(検索など)または虫眼鏡記号を入れる 

placeholderのことでしょうか。
虫眼鏡については提示サイトではSVGで対応されているようですが、フォントアイコンでも対応可能です。
FontAwesomeとかMaterial Iconsとかが有名でしょうか。

「このサイトのここ、どう作ってるんだろう」を見たいときはブラウザの開発ツールを利用すると良いです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/03/12 16:34

    解決しました。ありがとうございます

    キャンセル

  • 2019/03/12 16:36

    ちょっと夜遅くまで時間がとれそうにないので単発の回答になってしまってます。
    他についてはもう少し具体的に実現したい状況を書かれた方が良いかと思いますので、適宜追記願います。
    (「図示を」と書きましたが質問には画像添付の可能なので)

    キャンセル

  • 2019/03/12 16:41

    ありがとうございます。とりあえず実現したいイメージを追加しました。

    キャンセル

  • 2019/03/12 23:02

    返信遅くなりました。FontAwesome早速導入しました。初めて知ることができました。これでまた一つ進歩できました、本当にありがとうございます。早速form 関係で検索窓の位置を制御できる方法を検索してみます。

    キャンセル

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

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

関連した質問

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