Question

我在Bootstrap导航栏中有一个搜索框。当我移动屏幕时，内容位于中心，但搜索框不是。当窗口缩小或增长时，如何使导航栏移动到中心？ 编辑：以下是导航栏的动态内容：http://www.bootply.com/3n1JFSOHPW

<div class="search" style="margin:auto; text-align:center;">
    <form class="navbar-form navbar-left" role="search" id="searchform">
        <div class="form-group" id="the-basics">
            <input type="text" id="searchbox" class="form-control typeahead" placeholder="Search TextNotes" style="border-top-right-radius: 0px; border-bottom-right-radius: 0px; margin:0 auto;" onfocus="change_button_color()" onblur="button_color_reset()" autocomplete="off" data-provide="typeahead">
        </div>
        <button id="searchbutton" type="submit" class="btn btn-default" style="margin-left:-4px;border-top-left-radius: 0px; border-bottom-left-radius:0px;"><span class="glyphicon glyphicon-search"></span></button>
     </form>
</div>

Answer 1

请参阅this bootply

修正了边距，将最大宽度设置得稍低，并设置表格的宽度。

主要变化是这两行：

<div class="search" style="margin: 0px auto; text-align:center; max-width: 400px;">
    <form class="navbar-form navbar-left" style="width:100%;" role="search" id="searchform">

HTH

-Ted

Bootstrap搜索输入动态中心

1 个答案: