移动视图中的文本框和按钮级别 [英] Textbox and Button Levels in mobile view

问题描述

我想创建一个带有两个按钮的大文本框（仅用于移动视图）。我从一个平面设计师那里得到了psd文件，我的设计适用于桌面和平板电脑，但唯一的问题是移动视图。以下是几行代码：

 < div style =text-align：centerclass =container> 
< h2>图书搜索！< / h2> 
< div class =row> 
< input type =textclass =col-xs-11 col-mid-8>< / input> 
< input type =buttonclass =col-xs-3 col-md-3 btn-primaryText =Search Book/> 
< input type =buttonclass =col-xs-3 col-md-3 btn-successvalue =Advance Search>< / input> 
< / div> 
< / div> 
  

这将在手机上显示以下截图：

和我当用户在他/她的手机上打开网站时，想要获得下面的视图，我已经阅读了引导文档，我尝试了不同的方式如他们的例子中所提到的，但没有任何工作可以显示以下设计：
任何人都可以请告诉我，错误在哪里？
谢谢

解决方案

请尝试将您的列类更改为：

 < div class =row> 
< input type =textclass =col-xs-12 col-sm-6>< / input> 
< input type =buttonclass =col-xs-6 col-sm-3 btn-primaryvalue =Search Book/> 
< input type =buttonclass =col-xs-6 col-sm-3 btn-successvalue =Advance Search>< / input> 
< / div> 
  

FIDDLE

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

解决方案

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

这篇关于移动视图中的文本框和按钮级别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！