搜索栏位于导航栏下方

Question

搜索栏应该在导航栏内，就在XYZ右边，但它位于导航栏下方。应该怎么做？

<div id="bar" class="navbar-inverse navbar-fixed-top">
    <div class="container">
        <div id="logo">
            <a href="main.php">XYZ</a>
        </div>
        <div class="col-xs-5">
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                    <div class="input-group-btn">
                        <button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

#bar{
    min-width: 800px;
    background-color: #563d7c;  
    width:100%; 
    height:42px;    
    box-shadow: 0px 3px 25px #888888;
    position: fixed;
}

Answer 1

首先要做的是将.col-xs-5包裹到div.row。

除此之外，请尝试附上jsfiddle演示，以便下次更好地演示问题。

Answer 2

您可以将徽标浮动到左侧。

#logo{float:left;}