首页    技术博客    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

推荐阅读
  • php

    网站访问全流程解析

    网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名（如www.yy.com）到页面完全展示的整个过程，包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • search

    解决Bootstrap DataTable Ajax请求重复问题

    解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中，我们使用了JQuery DataTable进行数据展示，虽然使用起来非常方便，但在测试过程中发现了一个问题：当查询条件改变时，有时查询结果的数据不正确。通过FireBug调试发现，点击搜索按钮时，会发送两次Ajax请求，一次是原条件的请求，一次是新条件的请求。 ... [详细]
  • email

    使用Python和smtplib实现邮件发送功能

    本文详细介绍了如何使用Python中的smtplib库来发送带有附件的邮件，并提供了完整的代码示例。作者：多测师_王sir，时间：2020年5月20日 17:24，微信：15367499889，公司：上海多测师信息有限公司。 ... [详细]
  • default

    php更新数据库字段的函数是,php更新数据库字段的函数是

    php更新数据库字段的函数是,php更新数据库字段的函数是 ... [详细]
  • search

    InfluxDB、collectd与Grafana的详细安装与配置指南

    本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先，按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库，用于存储时间序列数据；collectd 负责数据的采集与传输；Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接，便于用户参考和进一步了解其配置选项。通过本指南，读者可以轻松搭建一个高效的数据监控系统。 ... [详细]
  • php

    在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解

    在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • spring

    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统

    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
    技术分享：使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
  • uri

    利用Struts1构建简易计算器：采用DispatchAction处理请求，动态Form优化开发流程，提供用户友好的错误提示

    本文介绍了如何利用Struts1框架构建一个简易的四则运算计算器。通过采用DispatchAction来处理不同类型的计算请求，并使用动态Form来优化开发流程，确保代码的简洁性和可维护性。同时，系统提供了用户友好的错误提示，以增强用户体验。 ... [详细]
  • php

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

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

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

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

    深入探索HTTP协议的学习与实践

    深入探索HTTP协议的学习与实践
    在初次访问某个网站时，由于本地没有缓存，服务器会返回一个200状态码的响应，并在响应头中设置Etag和Last-Modified等缓存控制字段。这些字段用于后续请求时验证资源是否已更新，从而提高页面加载速度和减少带宽消耗。本文将深入探讨HTTP缓存机制及其在实际应用中的优化策略，帮助读者更好地理解和运用HTTP协议。 ... [详细]
  • php

    如何在PHP中计算腾讯云接口签名，实现人脸核身接口的对接与签名配置

    在PHP中实现腾讯云接口签名，以完成人脸核身功能的对接与签名配置时，需要注意将文档中的POST请求改为GET请求。具体步骤包括：使用你的`secretKey`生成签名字符串`$srcStr`，格式为`GET faceid.tencentcloudapi.com?`，确保参数正确拼接，避免因请求方法错误导致的签名问题。此外，还需关注API的其他参数要求，确保请求的完整性和安全性。 ... [详细]
  • php

    网页数据抓取与解析入门指南

    本指南介绍了 `requests` 库的基本使用方法，详细解释了其七个主要函数。其中，`requests.request()` 是构建请求的基础方法，支持其他高级功能的实现。此外，我们还重点介绍了如何使用 `requests.get()` 方法来获取 HTML 网页内容，这是进行网页数据抓取和解析的重要步骤。通过这些基础方法，读者可以轻松上手并掌握网页数据抓取的核心技巧。 ... [详细]
  • default

    在Django中提交表单时遇到值错误问题如何解决？

    在Django中提交表单时遇到值错误问题如何解决？
    在Django项目中，当用户提交包含多个选择目标的表单时，可能会遇到值错误问题。本文将探讨如何通过优化表单处理逻辑和验证机制来有效解决这一问题，确保表单数据的准确性和完整性。 ... [详细]
  • search

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

    技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告
    技术日志：使用 Ruby 爬虫抓取拉勾网职位数据并生成词云分析报告 ... [详细]
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社区 版权所有