两个输入相同的表单列占用所有单元格宽度 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 的相关文章

随机推荐

  • 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 即可完成工