Question

我试图在bootstrap（版本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>

Answer 1

如果您正在寻找更大的搜索框，可以添加课程"input-group-lg＆＃34;在<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;"

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

1 个答案: