Bootstrap 3 删除内联输入之间的空间

2024-03-04

我正在做一个简单的内联表单。如何调整每个输入表单之间的空白?我想让输入基本上接触。

    <div class="row">
<form class="in-line" role="form">
<div class="col-md-3 col-md-offset-3">
    <div class="form-group">
        <input type="email" class="form-control input-lg" id="EmailInput" placeholder="Email Address">
    </div>
</div>
<div class="col-md-2">
    <div class ="form-group">
        <input type="text" class="form-control input-lg" placeholder="City">
    </div>
</div>
<div class="col-md-3">  
        <button class="btn btn-lg btn-success" type="button">Submit</button>
</form>
</div>

间距是由网格列之间的 Bootstrap 固有填充引起的。如果您希望表单元素相互对接(左和右),您可以只浮动容器 div。

http://jsfiddle.net/2n9AH/1/ http://jsfiddle.net/2n9AH/1/

HTML

<div class="row">
    <div class="formElement">
        <input type="email" class="form-control input-lg" id="EmailInput" placeholder="Email Address">
    </div>
    <div class="formElement">
        <input type="text" class="form-control input-lg" placeholder="City">
    </div>
</div>

CSS

 .formElement {
    float:left;
    width:200px;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Bootstrap 3 删除内联输入之间的空间 的相关文章

  • 一个输入字段,多个名称

    在 HTML 表单中 如何从一个输入字段获取两个姓名 是否可以通过隐藏的输入字段 如何 我试图使隐藏字段值动态等于非隐藏字段值 这样无论用户写什么 它们都相等 但我确信它不起作用 而不是像这样的东西是否会起作用工作 Here http ww
  • VueJS - 验证表单文件上传中的文件大小要求

    我正在使用 Bootstrap Vue 表单制作一个简单的表单 用户可以在其中上传文件 有没有办法验证使用 Vue 表单选择的文件的大小 我想阻止用户上传此类文件 我见过this https stackoverflow com questi
  • 如何通过 jQuery onblur 提交表单

    所以我尝试通过 jQuery onblur 提交表单 即一旦焦点离开密码字段 表单就会通过 jQuery 提交 有类似的问题 但这不是我要找的 我尝试使用 document getElementById 但它不起作用 任何帮助表示赞赏 提前
  • HTML 表单检查空字段

    我已经在 HTML 表单中实现了输入验证 但是 如果出现任何错误 它不会提示用户 并且仍然继续将其数据发送到测试服务器 下面是我的代码
  • 使用 SenchaTouch 的简单登录表单

    刚开始研究 SenchaTouch 这看起来很有前途 我正在构建我的第一个应用程序 一个简单的登录表单检查源http pastebin com 8Zddr9cj http pastebin com 8Zddr9cj 我正在寻找一种方法来执行
  • 将 div 元素放置在响应式背景上(Bootstrap 3)

    我想将 div 输入表单 放置在响应式背景上 我使用 Bootstrap 3 作为页面模板 但是 如果我调整窗口大小或使用其他屏幕尺寸 则元素位于另一个位置 我该如何解决这个常见问题 Example http goo gl D7TwIP h
  • 在移动 Chrome 上上传图片表单失败

    我正在构建一个移动网络应用程序 其中用户手机上的图片发挥着重要作用 我有这个表单 用户可以将手机拍摄的照片上传到应用程序的数据库中 我在用着CodeIgniter上传类 https ellislab com codeigniter user
  • 大文本输入导致 http post 失败

    我的应用程序中有一个表单 技术人员可以在其中输入有关不同事件或所采取操作 例如更新服务器 的信息 问题是这些输入可能相当长 然后我的表单就停止工作了 如果浏览器尝试发送数据 服务器会向浏览器返回 302 错误 但通常当我尝试提交时 浏览器不
  • 在引导汉堡包图标的左侧添加电话和地图图标

    我有一个基本的 bootstrap v3 网站 当导航栏在较小的屏幕上切换到汉堡包图标时 我想添加一个电话图标 链接到电话号码 和一个地图图标 链接到谷歌地图 以便移动用户可以轻松访问它们 我尝试通过在 navbar toggle 按钮之前
  • 使用 javascript 而非 jQuery 的简单 ajax 表单

    我正在使用一个表单 其标记我无法更改且无法使用 jQuery 目前 该表单将结果发布到新窗口 是否可以将其更改为 ajax 表单 以便在提交时显示结果而不更改任何标记 将结果 标记 从结果页面拉回到表单页面 这是表单的标记
  • 防止 jQuery 中的双重表单提交

    我有一个用户用来输入有关发布信息的表单 完成后 他们单击 保存 进行更新 然而 在极少数情况下 15 000 条记录中的 10 条 用户双击保存按钮并导致双重表单提交 从而导致发布的项目重复 我尝试用它来防止它 input type sub
  • 使用 Laravel 在 Bootstrap 模式中动态加载表单

    我正在开发应用程序 它需要引导模式中的表单 并且还动态加载表单 我面临的问题是所有页面都再次以模式加载 这里有人为此提供任何例子吗 控制器 public function loadJsModalForm return View make f
  • SwiftUI 表单中的动态行高

    我正在向 SwiftUI 表单添加控件以帮助用户输入数据 并限制条目 尽管 Forms 有很多值得喜欢的地方 但我发现在该容器之外运行良好的东西在容器内却会发生非常意想不到的事情 并且如何弥补这一点并不总是显而易见的 计划是将数据字段显示为
  • Rails f.check_box 设置选中/未选中值

    所以我在 Rails 中得到了一个带有复选框的表单助手 我希望该复选框在选中或取消选中时具有 thatvalue 或 thisvalue 值 我还没有找到如何设置它的地方 f check box field 我发现了类似的东西 但它不起作用
  • 如何重置 jQuery 中的单选按钮,以便不检查任何单选按钮

    我在 HTML 中有这样的单选按钮 td td
  • 通过删除空 GET 变量并简化变量名称来缩短 URL

    我正在开发一个网站 在提交后组成一个 URLGET form 表单值作为一组变量传递 其中必须至少定义一个变量才能在数据库上进行搜索 我想将网址缩短为删除空表单元素并使其更加用户友好简化变量名称 目前 URL 如下所示 只是带有更多变量 我
  • 表单发布请求并存储收到的数据

    我有一个非常简单的表单 在提交时发出发布请求
  • Jquery一键提交多个同名表单

    我有动态创建的循环表单 我需要一键提交所有表单 我正在遵循下面的代码 你能建议我怎么做吗 谢谢
  • 阻止内容因 Bootstrap 中的重叠而被下推

    In a 上一个问题 https stackoverflow com questions 22293227 make an element overlap contents below it using bootstrap 22293428
  • 如何在 Express (NodeJS) 中验证和处理表单

    Express 是否有首选的表单处理和验证库 我真的在寻找与 Django 表单中类似的抽象级别 即模板中的验证和错误报告 如果可以在客户端使用相同的验证 那就太好了 有人用过或者写过什么好东西吗 看起来有一个模块位于https githu

随机推荐