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

Question

I am trying to append a Search button to an input search field which is not working properly.

I am not able to trace the error as I am new to bootstrap.

I have set up an example on jsFiddle

I am trying to make it work in an asp.net webform based website

Below is the code snippet

        <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 Button doesn't append properly with the input field. as shown in this example

I have made some minor changes to css to make it work with max-width:1000px.

Rest is almost same. I even tried to use botstrap css directly from CDN but it doesnt make different to the button

UPDATE:

I tried changing .btn css

.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; 

This line to padding: 6px 12px;. This minutely fixed it in FF but other browser it make problem worse.

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>