html - 引导按钮问题

Question

所以，我试图实现一个带有搜索按钮的简单搜索框(bootstrap http://bootsnipp.com/snippets/featured/stylish-search-form )，但我在使用该按钮时遇到了一些问题。当我从 bootstrap 应用 html 和 css 时，我得到的是一个没有放大镜的隐藏按钮。当我将鼠标悬停在应该所在的区域时，我所看到的只是一个小矩形。另外，知道为什么我的 div.container 和 div.span 12 没有在中心对齐吗？

[无搜索按钮] https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.19.14.png ! [div span-12] https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.20.17.png ! [div容器] https://dl.dropboxusercontent.com/u/18019794/Screenshot%202016-12-21%2013.20.19.png !

我的html:

<div class="container">
  <div class="row">
        <div class="span12">
            <form id="custom-search-form" class="form-search form-horizontal">
                <div class="input-append span12">
                    <input type="text" class="search-query" placeholder="Search">
                    <button type="submit" class="btn"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
  </div>
</div

>

我的CSS:

#custom-search-form {
        margin:0;
        margin-top: 5px;
        padding: 0;
    }

    #custom-search-form .search-query {
        padding-right: 3px;
        padding-right: 4px \9;
        padding-left: 3px;
        padding-left: 4px \9;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */

        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    #custom-search-form button {
        border: 0;
        background: none;
        /** belows styles are working good */
        padding: 2px 5px;
        margin-top: 2px;
        position: relative;
        left: -28px;
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .search-query:focus + button {
        z-index: 3;   
    }

Answer 1

您找到的示例需要 Bootstrap 2.3.2，并且在 Bootstrap 3 中不起作用。请参阅我的示例，当我调用 Bootstrap 2(我调用了 css 和 js)并且我删除了您的 css 以便您可以从漂亮干净的底座:

/*
#custom-search-form {
        margin:0;
        margin-top: 5px;
        padding: 0;
    }

    #custom-search-form .search-query {
        padding-right: 3px;
        padding-right: 4px \9;
        padding-left: 3px;
        padding-left: 4px \9;
*/
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
/*
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    #custom-search-form button {
        border: 0;
        background: none;
*/
        /** belows styles are working good */
      /*  padding: 2px 5px;
        margin-top: 2px;
        position: relative;
        left: -28px;
*/
        /* IE7-8 doesn't have border-radius, so don't indent the padding */
/*
        margin-bottom: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }

    .search-query:focus + button {
        z-index: 3;   
    }
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
        <div class="span12">
            <form id="custom-search-form" class="form-search form-horizontal">
                <div class="input-append span12">
                    <input type="text" class="search-query" placeholder="Search">
                    <button type="submit" class="btn"><i class="icon-search"></i></button>
                </div>
            </form>
        </div>
  </div>
</div