Question

使用Bootstrap 2.0，我无法将form controls放在navbar中。 obvious guess会使搜索框过高。

如何解决我的小提琴？

Answer 1

如果你把它放在.nav .container中：

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

你会得到一个漂亮的搜索框：http://jsfiddle.net/p4eAN/1/

如果您想对齐右侧的搜索栏，请将“左拉”类改为“向右拉”

-update- 将输入标签与输入标签结合起来，添加一小部分css：http://jsfiddle.net/7J7cz/56/

.navbar-search .input-prepend {
  margin-bottom: 0;
}

-update2- 添加了一个浮动：右边的输入，这修复了Chrome，Firefox已经正常工作，仍然有效：http://jsfiddle.net/7J7cz/57/

Answer 2

检查此

        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <form class="navbar-form form-inline">
                        <select id="selectbasic" name="selectbasic" style="margin-left: 5px;" class="input-medium">
                          <option selected>Buy</option>
                          <option>Rent</option>
                        </select>

                        <input type="text" class="input-xlarge" required=""  placeholder = "Enter Location">

                        <select id="selectbasic" name="selectbasic" class="span3">
                          <option selected>Property Type</option>
                          <option>Option two</option>
                        </select>

                        <select id="selectbasic" name="selectbasic" class="input-small">
                          <option selected>Bedroom</option>
                          <option>Option two</option>
                        </select>

                        <select id="selectbasic" name="selectbasic" class="input-small">
                          <option>Bathroom</option>
                          <option>Option two</option>
                        </select> 

                        <button type="submit" class="btn btn-success">Search</button>
                        <a href="#" class="adv-search" data-id="<?php echo $fetch['stu_id']; ?>" title="Advance Search"><button class="btn" type="button" style="margin-left:10px;" ><i class="icon-th-list"></i></button></a>
                    </form>
                 </div>
            </div>
        </div><!-- /.navbar -->

Answer 3

li元素的活动类在底部有一个间隙第1项

将表单控件放在导航栏中

3 个答案: