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

2023年4月10日 225次阅读

我的网站上有以下导航栏 – 想法是徽标,链接和带按钮的搜索框都应该显示在一行中,因为它当前在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>

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

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

您还应该将搜索按钮包裹在< span class =“input-group-btn”> ..按钮..< / 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>

请注意,我没有对此进行过多次测试,我认为它在小屏幕上效果不佳,但我认为无论如何都不会这么做.但是试一试,希望它有所帮助.

点赞