Textbox and Button Levels in mobile view

问题

I would like to create a big Textbox with two buttons below (for mobile view only). I got the psd file from a graphic designer, and my design works for Desktop and Tablet, but the only problem is with Mobile view. Here are few lines of code

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

This will give the following screen shot on mobile

and I want to get the following view when a user opens the website in his/her mobile, I already read the bootstrap document, I tried different ways "as mentioned in their examples" but none works to display the following design Can anyone tell me please, where is the error? thanks

回答1:

Try changing your column classes to:

<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

来源：https://stackoverflow.com/questions/29868198/textbox-and-button-levels-in-mobile-view