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 container] 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

＆GT;

我的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时，它可以正常工作来自一个干净的基地：

＆＃13;

/*
#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;   
    }
*/

＆＃13;

<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

＆＃13;

引导按钮问题

1 个答案: