增加导航栏输入大小的正确方法是什么答案

【问题标题】：What is the right way to increase the input size on navbar增加导航栏输入大小的正确方法是什么
【发布时间】：2017-04-27 13:42:25
【问题描述】：

我正在尝试在引导程序（版本 4）上编写以下导航栏，但是，我想知道如何增加输入的大小，如下所示：

我的代码如下：

<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>

【问题讨论】：

标签： twitter-bootstrap input navbar bootstrap-4

【解决方案1】：

如果您正在寻找更大的搜索框，您可以将类 "input-group-lg" 添加到 <input> 标签所在的 div 中。如：

 <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;"

【讨论】：