移動視圖中的文本框和按鈕級別

Question

我想創建一個帶有兩個按鈕的大型文本框（僅適用於移動視圖）。我從一個平面設計師那裏得到了psd文件，我的設計適用於桌面和平板電腦，但唯一的問題是移動視圖。下面是幾行代碼

<div style="text-align:center" class="container"> 
    <h2 >Books Search!</h2> 
    <div class="row" > 
    <input type="text"class=" col-xs-11 col-mid-8 " ></input> 
    <input type="button" class=" col-xs-3 col-md-3 btn-primary" Text="Search Book"/> 
    <input type="button" class="col-xs-3 col-md-3 btn-success" value="Advance Search"></input> 
    </div> 
    </div> 

這將給移動

下面的屏幕截圖，我想下面的視圖當用戶打開該網站在他/她的移動，我已經閱讀了bootstrap文檔，我嘗試了不同的方式「如他們的例子中提到的」，但是沒有一個能夠顯示以下設計 請問誰能告訴我，錯誤在哪裏？ 感謝

Answer 1

試試你的塔班改爲：

<div class="row"> 
    <input type="text" class=" col-xs-12 col-sm-6 "></input> 
    <input type="button" class=" col-xs-6 col-sm-3 btn-primary" value="Search Book" /> 
    <input type="button" class="col-xs-6 col-sm-3 btn-success" value="Advance Search"></input> 
</div> 

FIDDLE