释义(并简化为2个输入的情况),您的问题是:

runApp(list(

ui = bootstrapPage(

textInput(inputId="xlimitsmin", label="x-min", value = 0.0),

textInput(inputId="xlimitsmax", label="x-max", value = 0.5)

),

server = function(input, output) {}

))

表演

在此处输入图片说明

但是您需要并排的小输入,例如:

小排

简短的答案

textInputRow

{

div(style="display:inline-block",

tags$label(label, `for` = inputId),

tags$input(id = inputId, type = "text", value = value,class="input-small"))

}

runApp(list(

ui = bootstrapPage(

textInputRow(inputId="xlimitsmin", label="x-min", value = 0.0),

textInputRow(inputId="xlimitsmax", label="x-max", value = 0.5)

),

server = function(input, output) {}

))

给出:

在此处输入图片说明

长答案

并排输入

让我们先并排进行:

当前,textInput生成两个单独的标记- label和- input,每个标记由CSS配置为display:block,这意味着它是一个矩形,将在容器的左侧断开。我们需要将每个textInput字段包装在新容器(div)中,并textInput使用CSS的告诉容器其后的容器(下一个)位于页面的同一水平行上display:inline-block。

因此,我们在每个div周围添加一个样式textInput:

runApp(list(

ui = bootstrapPage(

div(style="display:inline-block",textInput(inputId="xlimitsmin", label="x-min", value = 0.0)),

div(style="display:inline-block",textInput(inputId="xlimitsmax", label="x-max", value = 0.5))

),

server = function(input, output) {}

))

小投入

现在让我们来处理小问题。有几种做小事情的方法,

缩小字体,

使输入框中的字符更少。

告诉CSS或(这里)引导程序绘制一个较小的框

因为bootstrap.js当我们使用光亮效果时实际上可以控制布局,所以只有3个可以可靠地起作用,所以让我们使用它。

输入大小记录在Bootstrap 2.3.2的CSS Forms文档中的“控件大小”下。它包括mini,small,medium,large,xlarge和xxlarge的各种大小,默认大小可能是中号。让我们尝试小些。

要设置大小,我们需要更改input生成的标签的类textInput。

现在textInput只是围绕更强大的tags功能(例如tags$label和)的便捷功能tags$input。我们可以构建一个更强大的版本,textInput该版本允许我们配置元素,尤其是input节点的类:

textInput2

{

tagList(tags$label(label, `for` = inputId), tags$input(id = inputId,

type = "text", value = value,...))

}

runApp(list(

ui = bootstrapPage(

div(style="display:inline-block",textInput2(inputId="xlimitsmin", label="x-min", value = 0.0, class="input-small")),

div(style="display:inline-block",textInput2(inputId="xlimitsmax", label="x-max", value = 0.5, class="input-small"))

),

server = function(input, output) {}

))

小排

我们已经完成了,但是可以通过textInput3生成div标签来汇总其中一些功能。它也可以单独设置类,但我将其留给您编写。

包起来

textInput3

{

div(style="display:inline-block",

tags$label(label, `for` = inputId),

tags$input(id = inputId, type = "text", value = value,...))

}

runApp(list(

ui = bootstrapPage(

textInput3(inputId="xlimitsmin", label="x-min", value = 0.0, class="input-small"),

textInput3(inputId="xlimitsmax", label="x-max", value = 0.5, class="input-small")

),

server = function(input, output) {}

))

出于兴趣的考虑,这是使用class的版本input-mini

html图片如何和输入框并排,闪亮的4个小文本输入框并排相关推荐

  1. 2021-4-27 工作记录--input和textarea出现边框部分失踪+让多个文本输入框左侧对齐+电话号码的正则表达式+图片和文字没有对齐+jQuery滚动视觉差插件+清除浮动

    一.input和textarea在不同屏幕尺寸下出现边框部分失踪的问题 1.解决方法 给input和textarea设置border 2.使用例子 代码: 结果: 二.让多个文本输入框左侧对齐 代码: ...

  2. ReactNative(学习部署){样式使用、图片、文本、布局、按钮、活动提示器、状态栏和背景图、开关和文本输入框}

    RN环境部署视频 链接: https://pan.baidu.com/s/1Z5msrmcoLwrcHwQIRVqKKA 提取码: abwu  RN部署资源 链接: https://pan.baidu ...

  3. alert获取输入框内容_实用开源:Web 聊天工具的富文本输入框

    最近折腾 Websocket,打算开发一个聊天室应用练练手.在应用开发的过程中发现可以插入 emoji ,粘贴图片的富文本输入框其实蕴含着许多有趣的知识,于是便打算记录下来和大家分享. 仓库地址:ch ...

  4. 代码创建按钮,文本输入框

    //创建按钮UIButton *btn = [[UIButton alloc] init];btn.frame = CGRectMake(0, 0, 100, 100);// 设置按钮在普通状态下的属 ...

  5. Android自定义文本输入框光标颜色

    主要通过配置文本输入框如EditText的: android:textCursorDrawable 属性完成. 如果设置 android:textCursorDrawable="@null& ...

  6. html input文本框样式,css 定义input文本输入框样式

    摘要 腾兴网为您分享:css 定义input文本输入框样式,找乐助手,长江e号,一点英语,天天爱等软件知识,以及多功能盒子,方寸天地,斗音,蚊声,奶牛牧场,聚好商城,滞纳金计算器,反p2p终结者,lo ...

  7. Flutter文本输入框TextField属性(InputDecoration、textInputAction、inputFormatters等等)详解

    文章目录 TextField TextField decoration keyboardType TextField textInputAction TextField onChanged TextF ...

  8. 文本输入框、密码输入框

    当用户要在表单中键入字母.数字等内容时,就会用到文本输入框.文本框也可以转化为密码输入框. 语法: <form><input type="text/password&quo ...

  9. jquery仿邮箱文本输入框自动加载邮箱后缀

    jquery仿邮箱文本输入框自动加载邮箱后缀 在像百度这样的网站注册时,你会看到输入邮箱会出现自动给用户输入补全主流邮箱.这种对于增加用户体验的小例子已司空见惯.正好看到人家写的这种js功能.还挺不错 ...

最新文章

  1. 大肆行贿!微软前员工爆料,在中东、非洲每年花2亿美元回扣送礼
  2. idea远程调试修改代码_使用IDEA远程调试线上代码
  3. think-in-java(17)容器深入研究
  4. 搭建私有helm仓库及图形界面
  5. yocto rootfs 支持pam
  6. vim编辑器使用详解
  7. Win7系统IE、搜狗等浏览器首页被恶意网址qq789.com.cn劫持……
  8. 低智商社会,娱乐至死,2书推荐,世界12大理论,
  9. FL Studio20.9进阶版 果味版 高级版 完整版区别
  10. 《淘宝技术这十年》读书笔记 (一).淘宝网技术简介及来源
  11. js实现首尾相连左右循环切换效果
  12. Element UI-动态合并表格行
  13. LVM Linear vs Striped Logical Volumes
  14. 微信朋友圈内测版-无视权限
  15. 【Android】RecycleView简单仿漫画APP图片相关样式
  16. 实际场景架构图实例及详细说明
  17. 什么是MapReduce,MapReduce的工作流程和原理是什么
  18. JAVA 项目打包和部署一站式解决方案
  19. 黑客在开源网站植入秘密后门、恶意软件通过非常规IP逃避检测|1月25日全球网络安全热点
  20. 酷欧天气 java.lang.RuntimeException: Unable to start activity ComponentInfo,程序无法运行

热门文章

  1. 苏州银行李伟:银行数字化转型中的隐私计算
  2. 人力资源外包(HRO)服务市场现状研究分析-
  3. Laravel -服务器配置-1
  4. oracle e-bussiness 简称
  5. Spring Boot 前世今生和整体架构分析
  6. 算法笔记 胡凡 codeup 吃糖果
  7. Python学习笔记--day10函数入门
  8. MLY翻译 -- 2.How to use this book to help your team?
  9. 带翻转特效的会员登录注册html页面源码
  10. Linux常用命令学习大全