Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >如何使用引导创建响应输入和按钮

如何使用引导创建响应输入和按钮
EN

Stack Overflow用户
提问于 2014-03-07 01:53:44
回答 2查看 1.8K关注 0票数 0

我正在尝试创建响应性输入和按钮,就像图像上的那样:

下面是类似的问题,但它没有响应:google search bar twitter-bootstrap

如何使它响应?

我正在使用最新的引导程序版本。

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-03-07 02:26:12

通过将控件放置在两行的组合中,使它们彼此折叠,同时使用Bootstrap的 helper class对它们进行中心设置(您也可以在这里使用offset )。

最后,在默认情况下,Bootstrap的输入标记扩展到它所封装的列的全宽度,从而添加了一个自定义类来将“搜索-输入”限制为用户设置宽度。

HTML

代码语言:javascript
运行
AI代码解释
复制
<style type="text/css">
    .smaller-input {
        width: 80%;
        margin: 0px auto 15px auto;
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="form-group">
                <div class="input-group smaller-input">
                  <input type="text" class="form-control" />
                  <span class="input-group-addon">
                      <span class="glyphicon glyphicon-earphone"></span>
                  </span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12 text-center">
            <div class="form-group">
                <div class="btn btn-default">Google Search</div>
                <div class="btn btn-default">I'm Feeling Lucky</div>
            </div>
        </div>
    </div>
</div>

结果

演示Fiddle:http://jsfiddle.net/A9C6U/

票数 1
EN

Stack Overflow用户

发布于 2014-03-07 02:08:21

将它们放在网格标记中,将自动响应。

代码语言:javascript
运行
AI代码解释
复制
<div class="row">
        <div class="col-md-6 col-md-offset-3 text-center">
        your html (button/input) here
     </div>
</div>

注意:不为您的输入分配固定大小。例如宽度:300

http://getbootstrap.com/examples/grid/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22246779

复制
相关文章
如何使用 Pygame 创建文本输入框?
要使用pygame,应该对Python语言有基本的了解。在本教程结束时,我们将能够了解 Pygame 的工作原理。它包括制作视频游戏和图形的几个功能。在安装 Pygame 之前,应该在系统中安装 Python。
很酷的站长
2023/08/11
5750
如何使用 Pygame 创建文本输入框?
VBA使用API_04:创建按钮
前面创建了窗体,窗体有了,一般我们还会添加一个按钮来执行程序,在前面创建了窗体的基础上,再使用API创建按钮就比较简单,只要在创建了窗体之后、显示之前再添加代码创建按钮。
xyj
2020/07/28
1.5K0
VBA使用API_04:创建按钮
python 按钮的响应事件
在PyCharm中创建一个项目,然后点击“Tools”--“External Tools”--“QTDesinger”打开QT Desinger
py3study
2020/01/06
2.9K0
创建一个窗口和按钮
} ` 以上是面向过程的思路,而Java是面向对象的,所以我们进行程序修改规范化:
天天Lotay
2022/12/01
7650
创建一个窗口和按钮
(interview)仅有输入用户名和密码和一个登录按钮,如何测试登录界面?
3、用户名和密码的验证,应该是用服务器验证,而不单单是在客户端用javascript验证
用户6367961
2022/01/12
2K0
pycharm如何创建py文件_pycharm输入不了
PyCharm是一款很好用的编写Python工程的IDE,用PyCharm创建一个Python文件或者向工程添加一个.py文件时,为了更好的使所编写的代码在各操作环境更好的运行,我们往往需要在.py文件中添加头文件标注相关信息。例如:
全栈程序员站长
2022/09/28
1.7K0
pycharm如何创建py文件_pycharm输入不了
Flutter创建圆圈图标按钮
我找不到任何显示如何创建IconButton类似于的圆的示例FloatingActionButton。任何人都可以建议创建一个自定义按钮的方式/需要什么FloatingActionButton吗?
徐建国
2021/09/03
1.9K0
创建没有按钮的UIAlertView
默认的,UIAlertView都有一个或者多个按钮,如果你想创建没有按钮的UIAlertView,可以使用以下的方法:
EltonZheng
2021/01/26
1.3K0
创建没有按钮的UIAlertView
ubuntu如何修复引导
****前言:**** 今晚快要下班的时候,cp文件夹到U盘里面,由于文件过大并且里面的文件都是代码小文件,想想接近700M大有多少小文件,然而电脑就发烧式的发烫,真不敢想象呢,前所未有的发热,于是我就想关机来让电脑来歇歇,万万没想到的就是,电脑关机出现异常了,这时候我已经意识到电脑maybe出了问题。然后我就立马开机,果然不出我所料,电脑系统进不了了。来公司前我安装了linux+win双系统,电脑开机默认进入的是win系统,看到提示,感觉是win除了问题,真是奇怪:上次使用win系统都没有问题的,让你w
AlicFeng
2018/06/08
9.5K0
如何引导访客注册
原文出处: gkogan 译文出处:TerryFan 许多初创公司的命运几乎完全取决于一个转换点:访问者何时转换成用户。 很多时候,这个关键的任务落在了再普通不过的“注册”按钮的肩上,而这个可怜的按钮在产品开发中却往往得不到任何考虑和关注。 如果你花一点时间来考虑注册按钮的措辞,也许就能大幅增加注册用户转化率。(当然在访客成为用户之后的事情至关重要,但一旦你有了用户的邮件地址,事情都会变得容易得多。) 各初创公司的注册按钮 为什么“注册”按钮起不了作用 它们被忽略了。当访客重复看到许多网站都共有的元
wangxl
2018/03/08
1.2K0
如何引导访客注册
Bootstrap响应式前端框架笔记五——按钮
    Bootstrap中预设了default,primary,info,warning,danger和link6种按钮风格,示例如下:
珲少
2018/08/15
1.1K0
Bootstrap响应式前端框架笔记五——按钮
Ant Design 按钮和图标的使用
同样的方法继续点击 “button”,就能一层一层看到具体是怎么写的。如果想深入了解可以看一看。
用户4793865
2023/02/03
2.5K0
Flutter的文本、图片和按钮使用
像视图数据流转机制、底层渲染方案、视图更新策略等知识,都是构成一个UI框架的根本,看似枯燥,却往往具有最长久的生命力。
JavaEdge
2023/07/09
6610
Flutter的文本、图片和按钮使用
【网页特效】11 个文本输入和 6 个按钮操作 特效库
地址:https://github.com/lindelof/power-mode-input
前端小智@大迁世界
2020/09/03
2.8K0
如何使用Nginx创建临时和永久重定向
HTTP重定向是将一个域或地址指向另一个域或地址的方式。有几种不同的重定向,每种重定向都意味着与客户端浏览器不同。两种最常见的类型是临时重定向和永久重定向。
宇cccc
2018/07/20
6.6K0
jQuery点击按钮,生成input输入框
需求,点击添加按钮,生成input输入框,如果上一个输入框为空,则弹出提示框提示,若不为空,则生成一行input框。
王小婷
2019/04/17
6.8K0
jQuery点击按钮,生成input输入框
使用OC引导ubuntu
按任意键进入输入模式,然后我们需要找到ubuntu的grub引导所在的分区. 直接输入 FS0: 回车,就能进入这个分区,然后再输入ls回车,查看里面的文件,看这个是不是存grub引导的地方.
GOOPHER
2022/03/31
3.4K0
使用OC引导ubuntu
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
可过滤作品集是一种流行的网络元素,可用于各种网站。它是一种作品画廊,大量作品整齐地排列在一起。值得注意的一点是,所有作品都可以在这里按类别排序。有一个导航栏,其中对所有类别进行了排序。单击这些类别中的任何一个时。然后可以看到该类别中的所有作品,而隐藏其余作品。结果,用户可以轻松地找到他选择的图像。
海拥
2021/09/09
6.5K0
❤️使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面 ❤️
[UWP]创建一个进度按钮
传统上UWP上处理进度可以这样实现,首先是XAML,包括一个ProgressBar和一个按钮:
dino.c
2019/01/18
9420
[UWP]创建一个进度按钮
CSS:使用CSS媒体查询创建响应式布局
  现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式。
王金龙
2019/02/25
3K0

相似问题

使用引导和单选按钮进行响应

12

引导响应表和按钮

15

输入组下拉式响应引导按钮

12

响应引导输入组按钮无法对齐

14

使用引导带3创建最小输入字段和按钮

11
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版!诚邀体验~
全新交互,全新视觉,新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能,全面提升创作效率和体验
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文