2016-12-12 10 views
0

私はブートストラップ(バージョン4)に次のnavbarを書こうとしていますが、どのようにして入力のサイズを大きくすることができますか以下:以下 enter image description herenavbarの入力サイズを増やす正しい方法は何ですか

マイコード:

<nav class="navbar bg-white navbar-fixed-top"> 
    <div class="container"> 
     <a class="navbar-brand" href="#"> 
     <img src="/images/img.png" > 
     </a> 
     <ul class="nav navbar-nav"> 
      <li class="nav-item"> 
       <div class="search_icon"> 
        <input type="email" class="form-control form-control-lg input_search" id="lgFormGroupInput" placeholder="What do you remember? Person, organization, place or keyword"> 
       </div> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item"> 
       <a class="nav-link" href="#">Link</a> 
      </li> 
      <li class="nav-item dropdown"> 
       <a class="nav-link dropdown-toggle" href="http://example.com" id="responsiveNavbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a> 
       <div class="dropdown-menu" aria-labelledby="responsiveNavbarDropdown"> 
        <a class="dropdown-item" href="#">Action</a> 
        <a class="dropdown-item" href="#">Another action</a> 
        <a class="dropdown-item" href="#">Something else here</a> 
       </div> 
      </li> 
     </ul> 

    </div> 
</nav> 

答えて

0

あなたは大きな検索ボックスを探している場合は、div要素<input>タグが入っているのようにに「クラス"input-group-lgを追加することができます。

<div class="search_icon input-group-lg"> 
    <input type="email" class="form-control form-control-lg input_search" id="lgFormGroupInput" placeholder="What do you remember? Person, organization, place or keyword"> 
</div> 

あなたはここで結果を見ることができます: http://jsfiddle.net/del_cueto/pLhseuea/2/

個人的に

私はあなたのイメージでボックスのサイズだけで罰金に見える、私は別のブートストラップクラス、あるいは、インラインCSSを使用してテキストのサイズを変更すると思います以下のようなスタイリング:

style = "font-size: 24px;" 
関連する問題