html - 带有引导程序的响应式设计无法正常工作

Question

我正在尝试将“搜索”按钮附加到无法正常工作的输入搜索字段。

由于我是引导程序新手，因此无法跟踪错误。

我在jsFiddle上设置了一个示例

我正在尝试使其在基于 asp.net webform 的网站中工作

下面是代码片段

        <div id="search-wrapper" class="span3 offset5">
            <div  class="span3 input-append">
                <asp:TextBox ID="txtSearch"  placeholder="Search" runat="server"></asp:TextBox>
                <asp:Button ID="btnSearch" CssClass="btn" runat="server" Text="Go!" />
            </div>
        </div> 

Go按钮未正确附加到输入字段。如本例所示

我对 css 做了一些小的改动，使其与 max-width:1000px 一起工作。

休息几乎一样。我什至尝试直接从 CDN 使用 botstrap css，但它与按钮没有什么不同

更新：

我尝试改变.btncss

.btn {
  display: inline-block;
  *border-left: 0 none #e6e6e6;
    border-right: 0 none #e6e6e6;
    border-top: 0 none #e6e6e6;
    border-bottom: 0 none #b3b3b3;
    display: inline;
    padding: 4px 12px; 

这一行要填充：6px 12px;。这在 FF 中稍微修复了它，但在其他浏览器中它使问题变得更糟。

Answer 1

Works here, a bit of a bad design: http://jsfiddle.net/azF8w/54/

<div class="input-prepend">
    <span class="add-on"><button>Go</button></span>
  <input class="span2" id="prependedInput" type="text" placeholder="Username">
</div>