Question

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

chrome

然而。当我在Firefox中打开网站时，它显示如下：

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>

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

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

请注意，我根本没有对此进行过多次测试，而且我认为它在小屏幕上效果不佳，但我认为它无论如何都不能做得那么好。但是试一试，希望它有所帮助。

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

1 个答案: