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

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>

这将在移动设备上显示以下屏幕截图

当用户在 his/her 移动设备上打开网站时，我想获得以下视图，我已经阅读了 bootstrap 文档，我尝试了不同的方式 "as mentioned in their examples" 但是 none 用于显示以下设计谁能告诉我，错误在哪里？谢谢

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

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

Textbox and Button Levels in mobile view

html

jquery-mobile

responsive-design

twitter-bootstrap