首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

提交按钮太接近表单-Bootstrap-Submitbuttontooclosetoform-Bootstrap

作者： | 来源：互联网 | 2023-09-14 17:29
Thesubmitbuttonoftheformtendstobesooclosetothefieldforsomereason.IamusingBootstr

The submit button of the form tends to be soo close to the field for some reason. I am using Bootstrap by the way.

由于某种原因,表单的提交按钮往往太靠近该字段。我顺便使用Bootstrap。

Code:


    

    
Contact Email

The site has other forms in other pages and all, and doesnt really had the problem. Not sure why is it happening for this one.

该网站在其他页面和所有页面中都有其他形式,并没有真正出现问题。不知道为什么会发生这种情况。

Note : closing just before the button fixes the issue, but then it wont submit since the button is no longer the part of the form.!

注意:在按钮修复问题之前关闭

,但由于按钮不再是表单的一部分,因此它不会提交。

Looking to find whats wrong in the code, rather than a hack fix in the css.

希望在代码中找到错误,而不是在CSS中修复hack。

This is how it looks.Picture

这是它的外观。

FIX : In the code, made

and ended the div before the input button. Fixed it. Fixed Codes, just incase come here from Google with similar issue :

FIX:在代码中,使

在输入按钮之前结束div。固定它。固定代码,只是来自Google的类似问题: 





Contact Email

2 个解决方案

#1

Wrap your input in an element with the form-group class. This class souldn't be on the form itself as you currently have it...

使用form-group类将输入包装在元素中。这个类不应该像你现在拥有的那样在形式上......


    

    
Contact Email

DEMO

#2

See the demo

Standard rules for the form layouts:

表单布局的标准规则:

Always use (helps improve accessibility for people using screen readers) Wrap labels and form controls in

(needed for optimum spacing) Add class .form-control to all textual ,

For your case, it should be like,

对于你的情况,应该是这样的,


    

    
Contact Email

推荐阅读
  • uri

    Linux网络配置详解：Firewalld与Netfilter机制解析及iptables应用

    在Linux系统中，网络配置是至关重要的任务之一。本文详细解析了Firewalld和Netfilter机制，并探讨了iptables的应用。通过使用`ip addr show`命令来查看网卡IP地址（需要安装`iproute`包），当网卡未分配IP地址或处于关闭状态时，可以通过`ip link set`命令进行配置和激活。此外，文章还介绍了如何利用Firewalld和iptables实现网络流量控制和安全策略管理，为系统管理员提供了实用的操作指南。 ... [详细]
  • request

    深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例

    深入解析 Android 中 EditText 的 getLayoutParams 方法及其代码应用实例 ... [详细]
  • timestamp

    微信小程序实现类似微博的无限回复功能，内置云开发数据库支持

    微信小程序实现类似微博的无限回复功能，内置云开发数据库支持
    本文详细介绍了如何利用微信小程序实现类似于微博的无限回复功能，并充分利用了微信云开发的数据库支持。文中不仅提供了关键代码片段，还包含了完整的页面代码，方便开发者按需使用。此外，HTML页面中包含了一些示例图片，开发者可以根据个人喜好进行替换。文章还将展示详细的数据库结构设计，帮助读者更好地理解和实现这一功能。 ... [详细]
  • search

    如何更有效地提升对支持部门的协助与支撑？ - Enhancing Support for the Support Department: Strategies and Best Practices

    尽管我们尽最大努力，任何软件开发过程中都难免会出现缺陷。为了更有效地提升对支持部门的协助与支撑，本文探讨了多种策略和最佳实践，旨在通过改进沟通、增强培训和支持流程来减少这些缺陷的影响，并提高整体服务质量和客户满意度。 ... [详细]
  • stream

    FFMpeg学习进阶：音频处理基础理论与重采样技术详解

    在Android平台中，播放音频的采样率通常固定为44.1kHz，而录音的采样率则固定为8kHz。为了确保音频设备的正常工作，底层驱动必须预先设定这些固定的采样率。当上层应用提供的采样率与这些预设值不匹配时，需要通过重采样（resample）技术来调整采样率，以保证音频数据的正确处理和传输。本文将详细探讨FFMpeg在音频处理中的基础理论及重采样技术的应用。 ... [详细]
  • window

    关于使用JavaScript在多个页面间传递参数的技术探讨

    本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言，从a.html页面跳转至b.html时，如何携带参数并使b.html替代当前页面显示，而非新开窗口。文中详细介绍了实现这一功能的代码及注释，帮助开发者更好地理解和应用该技术。 ... [详细]
  • request

    深入解析 jQuery 中 ajaxSubmit 方法的使用技巧与应用场景

    本文详细探讨了 jQuery 中 `ajaxSubmit` 方法的使用技巧及其应用场景。首先，介绍了如何正确引入必要的脚本文件，如 `jquery.form.js` 和 `jquery-1.8.0.min.js`。接着，通过具体示例展示了如何利用 `ajaxSubmit` 方法实现表单的异步提交，包括数据的发送、接收和处理。此外，还讨论了该方法在不同场景下的应用，如文件上传、表单验证和动态更新页面内容等，提供了丰富的代码示例和最佳实践建议。 ... [详细]
  • search

    技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告

    技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
  • object

    利用Ruby on Rails构建自定义页面 - Building Custom Pages with Ruby on Rails

    我正在使用 Ruby on Rails 构建个人网站。总体而言，RoR 是一个非常出色的工具，它提供了丰富的功能和灵活性，使得创建自定义页面变得既高效又便捷。通过利用其强大的框架和模块化设计，我可以轻松实现复杂的功能，同时保持代码的整洁和可维护性。此外，Rails 的社区支持也非常强大，为开发过程中遇到的问题提供了丰富的资源和解决方案。 ... [详细]
  • stream

    Java Socket 关键参数详解与优化建议

    Java Socket 关键参数详解与优化建议
    Java Socket 的 API 虽然被广泛使用，但其关键参数的用途却鲜为人知。本文详细解析了 Java Socket 中的重要参数，如 backlog 参数，它用于控制服务器等待连接请求的队列长度。此外，还探讨了其他参数如 SO_TIMEOUT、SO_REUSEADDR 等的配置方法及其对性能的影响，并提供了优化建议，帮助开发者提升网络通信的稳定性和效率。 ... [详细]
  • stream

    Python 伦理黑客技术：深入探讨后门攻击（第三部分）

    Python 伦理黑客技术：深入探讨后门攻击（第三部分）
    在《Python 伦理黑客技术：深入探讨后门攻击（第三部分）》中，作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流，难以确定消息批次的结束点，这给后门攻击的实现带来了挑战。为了解决这一问题，文章提出了一系列有效的技术方案，包括使用特定的分隔符和长度前缀，以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性，还为安全研究人员提供了宝贵的参考。 ... [详细]
  • window

    C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨

    C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧，并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型，本文详细介绍了如何高效地处理多线程任务，确保程序的稳定性和性能。同时，文章还结合实际案例，展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • js

    Vue 页面状态管理与跨页面数据传递的有效策略

    在 Vue 应用开发中，页面状态管理和跨页面数据传递是常见需求。本文将详细介绍 Vue Router 提供的两种有效方式，帮助开发者高效地实现页面间的数据交互与状态同步，同时分享一些最佳实践和注意事项。 ... [详细]
  • js

    提升编程技能的10个专业建议

    本文源自极分享，详细内容请参阅原文。技术债务如同信用卡负债，随着时间推移，修复成本会越来越高，因此程序员必须对此有深刻认识。此外，团队应致力于培养一种持续维护和优化代码的文化，以减少技术债务的累积。 ... [详细]
  • stream

    移动开发人员晋升与加薪必备的八大技能，值得珍藏

    经过半年的精心整理，我们汇总了当前市场上最全面的Android面试题解析，为移动开发人员的晋升和加薪提供了宝贵的参考资料。本书详细涵盖了从基础到高级的各类面试题，帮助读者全面提升技术实力和面试表现。章节目录包括：- 第一章：Android基础面试题- 第二章：... ... [详细]
author-avatar
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有