两个输入相同的表单列占用所有单元格宽度 Bootstrap 3

2024-02-14

我正在尝试移交 Bootstrap 3,但我在网格的新类方面遇到了困难。以前版本的 Bootstrap 允许您通过添加 span-* 类来设置输入的宽度,因此如果您想将两个输入放在同一表单列上,添加 span-2 和 span-10 即可完成工作。我正在尝试使用 bootstrap 3 执行此操作,但我没有得到与您在此看到的相同的结果fiddle http://jsfiddle.net/FXEW3/,我想将选择和输入设置在同一列上。我希望标签位于输入顶部,因此添加inline class到表格不起作用。

我在这里缺少什么?

提前欢呼和感谢


http://jsbin.com/esewOyo/1/ http://jsbin.com/esewOyo/1/

大多数人无法相信涉及到多少个类,但表单控制始终是 100%,因此每个类都必须进入一个 col--类,如果您想将元素放在同一行,在这种情况下,您可以使用包含列的嵌套行,如下所示:

<div class="container">
 <form role="form">
  <div class="row my-row">
   <div class="col-sm-4">
    <div class="row">
     <div class="col-xs-6">
      <div class="form-group">
       <label>C-Band</label>
       <select class="form-control">
        <option value="C15+">C15+</option>
        <option value="C12-14">C12-14</option>
        <option>
       </select>
      </div>
     </div>
     <div class="col-xs-6">
      <div class="form-group">
       <label>&nbsp;</label>
       <input type="text" class="form-control">
      </div>
     </div>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
   <div class="col-sm-2">
    <div class="form-group">
     <label>C-Band</label>
     <select class="form-control">
      <option value="C15+">C15+</option>
      <option value="C12-14">C12-14</option>
      <option>
     </select>
    </div>
   </div>
  </div>
 </form>
</div>

因为排水沟太宽了,不适合我的口味:

.row.my-row, .row.my-row .row {
  margin-left:-1%;
  margin-right:-1%
}

.row.my-row [class*="col-"] {
 padding-left: 1%;
  padding-right: 1%; 
}

.row.my-row .row [class*="col-"] {
  padding-left: 1%;
  padding-right: 1%;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

两个输入相同的表单列占用所有单元格宽度 Bootstrap 3 的相关文章

  • Bootstrap 3.0.2 中的面包屑导航栏

    我是 Bootstrap 的新手 我想创建一个带有一些内容 链接 下拉菜单 和面包屑的导航栏 但是当我将面包屑放入导航栏中时 我的显示有问题 块 我认为 这是我的示例代码
  • (响应式)表格宽度不适合 ios safari 上 iframe 内的容器

    我在 iPhone 的 safari 上的 iframe 内渲染表格时遇到问题 这是示例 http jsfiddle net qb86ojms http jsfiddle net qb86ojms 如果您在桌面浏览器 较小的尺寸 或 and
  • Bootstrap 3 + 选择 + jquery 验证丢失格式

    我有下面的代码http jsfiddle net emamut CBjmj 4 http jsfiddle net emamut CBjmj 4 validator setDefaults ignore hidden not select
  • Bootstrap 3 网格,一行中有多少列“真的”重要吗?

    我有一个表单布局 上面有 Bootstrap 3 表单组 我希望这些表单组在 我显然让它工作得很好 但是在这里阅读了一些内容后 我所做的似乎违反了假设的规则 即一行中的每一列加起来必须等于 12 但是我能找到的每个教程和文档总是使用诸如 应
  • 在 Bootstrap 导航栏后添加一些空间的最佳方法是什么?

    以下代码始终在页面顶部显示导航栏 我需要将第二个容器 内容 放置在导航栏的末尾而不是其下方 目前第二个容器位于导航栏下方 我可以在内容顶部添加一些空白 但我不确定这是一个好方法 知道如何解决吗 div class container div
  • 循环浏览 Bootstrap 3 jumbotron 的背景图像

    我正在尝试获取 3 个图像作为 Bootstrap 3 jumbotron 的背景循环播放 但问题是我在大屏幕中有 3 个 div 到目前为止我尝试过的所有解决方案都要求我将大屏幕的位置更改为相对位置 将背景图像更改为绝对位置 而且因为我试
  • 如何使用 Bootstrap 3 将 960.gs 网站转换为 HTML

    我使用 960 gs 960 网格系统 创建了 Photoshop 模型 网站容器宽度为 960px 中心对齐 该网站需要具有响应能力 我应该怎么做 使用 Bootstrap 3 将网站转换为 HTMl 下载之前我需要自定义引导程序吗 1
  • Bootstrap 3 在移动设备上滑入菜单/导航栏 [关闭]

    Closed 这个问题需要调试细节 help minimal reproducible example 目前不接受答案 我正在构建一个基于浏览器的移动应用程序 我决定使用 Bootstrap 3 作为设计的 CSS 框架 Bootstrap
  • 如何确定当前使用哪个网格选项

    我将 Bootstrap 3 用于使用 PHP 和 HTML 创建的网页 随着响应式网格和类的开启引导程序3您可以将多个类分配给一个 div 以根据当前屏幕尺寸定义不同的宽度 例如 div class col lg 3 col md 3 c
  • SASS如何在旋转body时使页面完整的高度和宽度?

    我必须旋转我的身体并做到这一点全高 and 全屏宽度 嗯 我用的是vh公制并且非常适合width但身高还是不太合适 我不得不旋转 90 度但是height and width仍然指相同的方向not rotate PS 我添加了 red以便更
  • bootstrap navbar-static-top 菜单分成两行

    我遇到了引导导航栏的问题 我使用 navbar static top 制作了菜单 起初一切都很好 当菜单被展开并添加了一些项目时 现在随着折叠之前的宽度 它扩展到两行 看起来很糟糕 在 CSS bootstrap 中进行了更深入的挖掘 但没
  • Bootstrap 日期选择器切换禁用

    我正在使用 bootstrap datepicker 并遇到问题 当我点击某一天时 效果很好 但是当我再次点击同一天时 效果很好 选择被取消 The 引导日期选择器演示 http eternicode github io bootstrap
  • Bootstrap .row margin-left: -15px - 为什么它会缩进(来自文档)

    我在 Bootstrap 文档中看到了这一行 http getbootstrap com css grid intro http getbootstrap com css grid intro It says 列通过填充创建装订线 列内容之
  • 禁用 Bootstrap 中的链接

    第一个例子没有成功 我需要始终有一个列表来禁用链接 或者我的第一个演示有什么问题 a class disabled href Disabled link a ul class nav nav pills li class disabled
  • 如果未使用“data-target”属性,Bootstrap 3.3.7 是否安全?

    有一个安全漏洞 https snyk io test npm bootstrap 3 3 7 tab issues关于 Bootstrap 3 3 7 它表示 该软件包的受影响版本很容易通过数据目标属性受到跨站点脚本 XSS 攻击 我想知道
  • Bootstrap 3:如何将默认网格设置为 960px 宽度?

    我正在使用 Bootstrap 3 客户希望将网站容器宽度设置为 960px 我是否直接编辑 CSS 文件 或者最好的方法是什么 我听说过一些关于 少 的事情 我可以自定义下载吗 谢谢 更新 该网站不需要响应 所以我可以禁用响应性 只需将
  • 使用 Bootstrap 3 具有固定高度、标题和列宽度的表格

    我想要一张具有以下功能的表 固定标题 固定高度 带有可见的滚动条 3个固定宽度的列 一个大列和两个窄列 我开始使用 tbody display block overflow auto height 100px 为了至少获得固定高度 但此规则
  • Bootstrap 3模态叠加背景颜色和动画

    当使用 Bootstrap 3 显示模态窗口时 我在更改背景颜色时遇到一些问题 理想情况下 我希望它更加黑色并稍微降低不透明度 但是当您单击此处的框时 http roblb devour org march2014 index 20copy
  • 阻止内容因 Bootstrap 中的重叠而被下推

    In a 上一个问题 https stackoverflow com questions 22293227 make an element overlap contents below it using bootstrap 22293428
  • 如何在 Bootstrap 列中使用文本溢出?

    假设我有一行具有固定高度 并且我在其列中插入了一些文本 如果太长 我希望将其剪掉 并在行尾添加三个点 如下所示 我在用着文本溢出 省略号 我的行中有此属性 但无法使其工作 JsFiddle http jsfiddle net Alexnot

随机推荐

  • Jasper Reports 中的 isPDFEmbedded 标签

    Jasper Reports 中 isPDFEmbedded 标签的用途是什么 您可以指定是否需要在报告的 pdf 导出中嵌入字体 将字体嵌入到 pdf 中会增加 pdf 的大小 但即使客户端计算机上未安装该字体 pdf 查看器也会显示正确
  • 使用 pscp 或其他工具将文件从 Linux 传输到 Windows

    问题陈述 我想将一些文件从远程计算机 Linux 复制到我的Windows计算机 我知道我可以使用 pscp 来做到这一点 我尝试在互联网上查找 找到了几篇文章 但在这些文章中我无法理解 并且在将文件从 Linx box 复制到 Windo
  • 如何在mathematica中应用涉及一百个变量的规则

    我有一个涉及 x1 x2 x100 的表达式 我还有一个列表lst有 100 个元素 如何将规则应用于此表达式以实现如下所示的效果 exp x1 gt lst 1 x2 gt lst 2 x100 gt lst 100 Thanks exp
  • 使用 MediaProjection 截取屏幕截图

    随着MediaProjectionAndroid L 中提供的 API 可以 将主屏幕 默认显示 的内容捕获到 Surface 对象中 然后您的应用程序可以通过网络发送该对象 我已经设法得到VirtualDisplay工作 以及我的Surf
  • Pandas str.split() 函数无法正常工作

    在尝试使用 Pandas 系列 str split 函数分割数据帧的 Actors 列中的值时 我得到的值比我指定的分割更多 df Actors df Actors str split n 3 1 timrobbins morganfree
  • Windows 上的 Java 串行通信

    我一直在寻找可以与 Windows Win32 上的串行设备通信的 Java API 但我检查过的许多 API 要么适用于 Linux 要么太过时 要么只是受到了批评 有人可以向我推荐一个他们已经尝试过或知道的可以在 Windows XP
  • 如何在 Intellisense 中禁用 JavaScript 浏览器 API 建议

    如何在 VSCode 中禁用 Web API 建议 例如 如果我输入 id 我会得到一堆 IndexDB 建议 如果可能的话我想禁用它 Thanks 是的 VS Code 默认包含 javascript 中的 DOM 补全 要禁用此功能 请
  • 将值设置为特定列时 JTable Java 错误堆栈溢出

    这是我下面的代码 我创建了一个 4 列 3 行的 Jtable 并添加表模型侦听器 在表更改侦听器中 当我在特定列中设置值时 堆栈溢出错误即将到来 error is Exception in thread AWT EventQueue 0
  • 如何使用 Python 的 matplotlib 烛台仅绘制工作日?

    如果没有周末 我无法绘制 matplotlib finance candlestick 每 5 个烛台之间有空格 这来自 Matplotlib 网站的示例 http matplotlib sourceforge net examples p
  • HOG描述符是旋转不变的吗?

    我正在从事杂草检测工作 我已经开始从 HoG 描述符中提取特征 根据 HoG 文献研究表明 HoG 不是旋转不变的 我有每类杂草的总共 18 张图像 有两类 在我的训练和测试数据库中 我将每个图像旋转了 5 10 15 20 355 度 训
  • 如何完成 Google Keep 布局之类的事情

    在 Google Keep 中 他们有几列 取决于您的视口宽度 等宽的注释 它们的排列使其看起来不统一 这样的事情怎么能完成呢 我猜他们在某些宽度上有特定的断点 并且在考虑了填充和边距之后 他们使图像匹配所需的宽度 并且简单地让图像高度保持
  • 如何结束文件的合并?

    在 Git 中合并文件后 我尝试拉取存储库 但出现错误 您尚未完成合并 MERGE HEAD 存在 如何完成合并 检查状态 git status 您的存储库 应添加每个未合并的文件 在您自己解决冲突之后 git add 如果没有未合并的文件
  • 如何获取本地日期时间而不是服务器日期时间

    我正在制作一个Java Web应用程序 其中不同国家的客户需要通过jsp页面上传文件 我必须在Weblogic服务器中部署这个应用程序 现在我想要的是他们的本地日期时间 我不需要服务器日期时间 我应该在我的 java 应用程序中编写什么代码
  • 使用 PowerShell 缩小 JSON?

    有没有办法缩小 在本例中删除所有空格 JSON 文件以将其变成 0 000005 0 0 219 740502 0 003449 4 177065 45 210918 0 003365 16 008996 344 552785 0 0302
  • 使用 jQuery UI“Accordion 和 Droppable”

    我对 jQuery UI Accordion 和 Droppable 有疑问 如何将项目从 tab 1 拖动到 tab 2 我已经在 jqueryui com Sortable Connect Lists with Tabs 中查看了演示
  • angular.js - 用西班牙语包装货币符号和小数

    你能用角度做这样的事情吗 不太可能做到这一点 因为不解析标签或其他东西 10000 currency span span http plnkr co edit WluYoe2Ltmhmhvr8BBWX p preview http plnk
  • Spring 工具套件 - NoClassDefFoundError MappingJackson2XmlHttpMessageConverter

    我是 Spring 的新手 我开始从他的网站学习它 理解Java对我来说并不难 但我对环境有困难 我按照本指南使用 Spring Boot 创建一个新项目 一切都很顺利https spring io guides gs spring boo
  • IIS 7.x,添加启用 HTTPS 的站点:SiteCollection.Add(string, string, string, byte[]) 重载

    我需要以编程方式添加 IIS 7 x 站点 当默认情况下应使用 HTTPS SSL 绑定创建该站点时 我陷入了困境 使用SiteCollection Add string string string byte 重载 http msdn mi
  • 是否可以为 Google 字体指定自定义名称?

    这是一个 CSS 示例 h1 font family header font arial sans serif p font family paragraph font arial serif 是否可以加载任何远程 Google 字体 比如
  • 两个输入相同的表单列占用所有单元格宽度 Bootstrap 3

    我正在尝试移交 Bootstrap 3 但我在网格的新类方面遇到了困难 以前版本的 Bootstrap 允许您通过添加 span 类来设置输入的宽度 因此如果您想将两个输入放在同一表单列上 添加 span 2 和 span 10 即可完成工