移动视图中的文本框和按钮级别

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>

这将在移动设备上提供以下屏幕截图

我希望在用户在他/她的手机中打开网站时获得以下视图，我已经阅读了自举文档，我尝试了不同的方式“如他们的示例中所述”但没有一个能够显示以下设计 任何人都可以告诉我，错误在哪里？ 感谢

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