bootstrap如何让表单的提交按钮不换行？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bootstrap如何让表单的提交按钮不换行？相关的知识，希望对你有一定的参考价值。
如图所示，我想把确认按钮放到select框后面，该如何实现？
现在这种写法如果想把提交按钮提上来，那么需要结合页面重新调试
主要涉及几个问题，
一是width:400px这两个写死的宽度，是否还有空间留给提交按钮
二是pull-left是浮动，pull-center是具体定义不清楚，把提交按钮提上来 建议把三个div都设置成pull-left
三 强制换行符的意义，不大明白这里为啥有个强制换行符
最后还是建议使用栅格重写本回答被提问者采纳 参考技术B
你倒数第四行不是有个换行标签吗？注释掉试试。
把按钮标签往上移试试，直接放在select标签后，或者select标签后的div标签里
<div style="line-height:50%;">
<br>
</div>
去掉就可以了追问
并没有用
追答你把代码发我一下，我调试试试
方便发的话就发一下，不方便就算了
追问已经解决了，在前面加上《div class=row》就行了
参考技术D 把 <br>删掉 第5个回答 2021-02-19 你用了bootstrap，为什么不用里面的删格布局？追问我不知道啥是栅格布局啊...这不是毕业设计在边学边做嘛....
追答
随便写了个例子你看一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
<div class="col-md-3">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</select>
</div>
<div class="col-md-3">
<br>
</div>
<div class="col-md-3">
<button type="button">点我!</button>
</div>
</div>
</div>
</body>
</html>
如何通过表单外的按钮提交表单？
【中文标题】如何通过表单外的按钮提交表单？【英文标题】：How to submit a form through a button outside the form? 【发布时间】：2019-09-25 06:37:23 【问题描述】：我想通过表单外部的按钮提交表单并对该表单进行验证。我正在使用 react-bootstrap 中的 Form 标签。
我的代码没有验证表单
<Form
noValidate
validated=validated
onSubmit=e=> this.handleSubmit(e)>
<Form.Control
required
placeholder="Product Name"
onChange=e => this.setState(name: e.target.value )
pattern="[A-Z a-z]3,30"
/>
</Form>
<button type="button" value="send" onClick=(e) => this.handleSubmit(e) className="btn btn-primary">Save</button>
handleSubmit(event)
const form = event.currentTarget;
if (form.checkValidity() === false)
event.preventDefault();
event.stopPropagation();
else
this.AddProduct();
this.setState( validated: true );
【问题讨论】：
The HTML5 placeholder attribute is not a substitute for the label element 考虑重构。我想不出你的按钮不在你的表单标签内的原因。即使元素的位置是一个问题......这就是 css 的用途。 @ElroyJetson 实际上我想制作一个表单，然后是一个表单，然后是一个按钮保存整个页面，这个按钮必须只验证第一个表单！ 【参考方案1】：理想情况下：不要那样做。表单元素是一种有用的结构元素。
失败了。为按钮添加一个form 属性，其值等于表单的id 属性。
表单 HTML5
按钮关联的表单元素（其表单所有者）。属性的值必须是 a 的 id 属性
<form>同一文档中的元素。如果没有这个属性 指定时，<button>元素将与祖先相关联<form>元素，如果存在的话。该属性使您能够 将<button>元素与<form>元素关联 文档，而不仅仅是<form>元素的后代。
——MDN
【讨论】：
以上是关于bootstrap如何让表单的提交按钮不换行？的主要内容，如果未能解决你的问题，请参考以下文章
使用layui的表单时，lable超过5个字自动换行变为不换行如何解决。
如何使整个表单（输入和提交按钮）在焦点上更改边框颜色（引导程序 3）
bootstrap codeigniter 表单输入和提交按钮