导航栏中的 Twitter Bootstrap 搜索框在 chrome 和 firefox 中呈现不同

Posted 2023-03-06

【中文标题】导航栏中的 Twitter Bootstrap 搜索框在 chrome 和 firefox 中呈现不同

【英文标题】：Twitter Bootstrap search box in navbar renders differently in chrome and firefox

【发布时间】：2014-05-31 05:19:10

【问题描述】：

我的网站上有以下导航栏 - 其想法是徽标、链接和带有按钮的搜索框都应该显示在一行中，因为它目前在 Chrome 中呈现：

但是。当我在 Firefox 中打开网站时，它的显示如下：

代码如下：

<header>
        <nav class="navbar navbar-default" role="navigation" id="navbarStyle">             
          <div class="nav navbar-nav navbar-left">      
            <a href="<?=base_url()?>">Brand</a>
           </div> 

       <div class="nav navbar-nav navbar-right">                         
        <form class="navbar-form navbar-left navbar-search" role="search">
                        <div class="form-group">
                            <div class="input-group">
                            <div class="col-lg-1">    
                            <input type="text" class="form-control"placeholder="Search">
                            <button type="submit" class="btn btn-danger">
                            <span class="glyphicon glyphicon-search"></span>
                            </button>
                            </div>
                            </div>
                        </div>
                    </form>
                </div>

            <div>
                <ul class="nav nav-justified">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </div>
        </nav>
    </header>

我一直在努力解决这个问题好几个小时，但没有任何成功。任何帮助都感激不尽！谢谢！

【参考方案1】：

我认为您遇到问题的主要原因是您在表单控件周围的 div 上使用了 col-lg-1 类。这迫使它的宽度是父元素宽度的 1/12（这已经非常小）。这然后将搜索按钮强制到下一行。您可以完全摆脱这个周围的 div，它只会使自己成为父级的最大宽度。再看一遍 bootstrap Grid 的文档，确保您确切知道应该如何使用它。

您还应该将搜索按钮包含在 <span class="input-group-btn">..your button..</span> 中以使其正确呈现 - 请参阅 http://getbootstrap.com/components/#input-groups-buttons

这是我调整后的代码版本

<header>
    <nav class="navbar navbar-default" role="navigation" id="navbarStyle">             
        <div class="nav navbar-nav navbar-left">      
            <a href="<?=base_url()?>">Brand</a>
        </div> 

        <div class="nav navbar-nav navbar-right">                         
            <form class="navbar-form navbar-left navbar-search" role="search">
                <div class="form-group">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <span class="input-group-btn">
                            <button type="submit" class="btn btn-danger">
                                <span class="glyphicon glyphicon-search"></span>
                            </button>
                        </span>
                    </div>
                </div>
            </form>
        </div>

        <div>
            <ul class="nav nav-justified">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </div>
    </nav>
</header>

请注意，我根本没有测试过这么多，而且我认为它在小屏幕上的渲染效果不佳，但我认为它无论如何都做得不太好。但是试一试，希望对您有所帮助。