如何使按钮与Bootstrap 5中其他表单元素的高度匹配？
在Bootstrap 5中，可以使用内置的类来使按钮与其他表单元素的高度匹配。以下是一种常见的方法：
- 使用
form-control类：将按钮的class设置为form-control，这样按钮的高度将与其他表单元素一致。例如：
<button class="form-control">按钮</button>- 使用
btn类和form-control类的组合：将按钮的class设置为btn和form-control的组合，以确保按钮的样式与其他表单元素一致。例如：
<button class="btn form-control">按钮</button>这样，按钮的高度将与其他表单元素的高度匹配。
在腾讯云的产品中，与前端开发相关的产品有云开发（https://cloud.tencent.com/product/tcb）和小程序开发（https://cloud.tencent.com/product/wxapp）。这些产品提供了丰富的功能和工具，可以帮助开发者快速构建和部署前端应用。
请注意，以上答案仅针对Bootstrap 5中按钮与其他表单元素的高度匹配的问题，如果有其他相关问题或需求，请提供更具体的信息，以便提供更准确和全面的答案。
相关·内容
2回答
我的每个弹出框都显示了第一个的内容
jquery、bootstrap-4、ejs、popper.js
我希望有一个产品表，在每一行中都有一个编辑和删除按钮。每个编辑按钮都会触发一个具有更新产品表单的弹出窗口。每个删除按钮只是一个确认。
在mongodb集合中，每个产品都有一个表行。我用for循环生成这个。
我的问题是，每个弹出窗口都与第一行相同。所有的数据内的弹出式以及来自第一个产品。因此，按下第3行的编辑和按下update，实际上将更新第一行。
我使用的引导带4(表和引导程序)，JQuery和EJS。
EJS
<table class="table table-light table-hover">
<thead class=" thead-
浏览 0提问于2019-01-24得票数 0
回答已采纳
1回答
如何在不知道按钮id/类或表单id/类的情况下提交表单？
javascript、jquery、html、node.js、ejs
嗨，我在一个页面中有多个表单，每个表单都有来自后端的不同的productId，每个表单都有两个按钮--一个添加产品--一个删除产品。如果他们点击'+‘按钮，它必须转到javascript中的' if’条件，如果他们点击'-‘按钮，它必须转到javascript中的’on‘条件。
这是我的html
<form>
<input type="hidden" class="form-control" name="productCatalogId" value="<%= data.produc
浏览 3提问于2017-04-13得票数 1
回答已采纳
2回答
动态发票表单字段并将其张贴到数据库
javascript、php、jquery
我正在构建一个表单来创建发票。目前，它具有以下形式字段：
产品名称，质量。
我有一个“添加更多”按钮，它添加了上述表单字段的另一行。
然后，它作为数组提交到另一个php页面。我遇到的问题是将每个相关的表单字段相互匹配，因为当我将它保存在数据库中时，我需要正确的产品名称，QTY显然是在表中的同一行。只是不知道怎么匹配。
当前，我在表单字段页面上的代码是：
<html>
<head>
<title>Invoice Test</title>
<link rel="styl
浏览 3提问于2016-08-02得票数 0
回答已采纳
3回答
具有相同高度的引导btn-群
css、twitter-bootstrap
我正在使用Bootstrap3，我在row中有一些按钮。如果有相同的宽度取决于屏幕大小，我使用btn-group-justified，它运行良好。但是我的按钮的标签上有一些单词和图标，我为white-space:normal设置了换行的可能性。但在这种情况下，按钮的height数是错误的几倍。如何强制所有按钮具有相同的height
<div class="btn-group-justified">
<div class="btn-group">
<button type="button" cl
浏览 4提问于2015-10-09得票数 5
回答已采纳
1回答
Code -源代码与Chrome呈现的信息不同
python、django、twitter-bootstrap、bootstrap-4
我正在做一个电子商务项目，我对一个问题大喊大叫。我正在使用Bootstrap和Django。我为这个冗长的问题道歉
我基本上有一个循环，它遍历数据库中的产品列表并列出它们。这是张桌子。每一行都是一个新产品，单元格是关于该产品的特定信息。最后一个单元格创建了一个小模式，用于编辑项目的当前信息。信息正确地通过循环传递，但在Chrome的渲染中，我看到所有产品中列出的产品一的信息。
该表如下所示：
下面是我用来生成表的循环：
<tbody>
{% for product in products %}
<tr>
<td>
浏览 4提问于2018-07-26得票数 1
回答已采纳
4回答
将html表单外部的按钮与表单对齐
html、css、bootstrap-4
我正在尝试将窗体外部的按钮对齐到窗体的同一行中。在减小屏幕尺寸时，窗体和两个按钮都应具有响应性并正确对齐。我正在共享代码片段。请提供一些建议。
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"
浏览 0提问于2020-08-12得票数 0
1回答
当我使用Laravel6.0点击“添加到卡片”按钮时，我想在购物车中显示产品项目吗？
html、laravel
当我点击“添加到卡”按钮时，我试图将产品项目显示到购物车中，如何修复它的错误？调用未定义函数Gloudemans\Shoppingcart\array_get()
控制器
public function cart()
{
return view('frontend/cart');
}
public function addCart(Request $request)
{
$product = Product::findOrFail($request->id);
$cartItem = Cart::add
浏览 0提问于2019-11-28得票数 1
回答已采纳
3回答
如何使元素对齐，使相似元素在同一行中显示
html、css
这是我现在的显示器。
“添加到购物车”按钮不显示在行中，因为第三元素产品名称是位长的。
这是显示产品的代码。
<div>
<div class='box' ng-repeat="product in ProductService.Products | filter:{'SubCategoryID': SCId.toString()}:true | orderBy:'ProductName'">
<br> <b>{{product.Bran
浏览 6提问于2015-04-04得票数 1
回答已采纳
2回答
预选窗体> select元素的选项，单击按钮吗？
jquery、html、forms
我有一个页面，显示多个产品，每个产品都有自己的“立即购买”按钮，然而，每个按钮导致相同的联系形式(在同一页)。
该联系人表单具有一个<select>元素，该元素具有选择产品之一的下拉选项。是否可以根据页面上单击的按钮预选<select>元素的值。
例如，如果用户单击产品"ABC“的”立即购买“按钮，联系人表单将显示，”产品“(<select>)元素的值将为"ABC”。
表单的代码，以防有人想看它：
<div class="pop-up">
<div class="popup-element&#
浏览 1提问于2015-05-13得票数 1
回答已采纳
3回答
在bootstrap组件上重写样式有问题
css、django、bootstrap-4、frontend
我不能让我的自定义css覆盖Django项目中Bootstrap4的任何组件。
我对前端开发非常陌生，希望我能清楚地问这个问题。注意:这是一个Django项目中的html表单。我的自定义css工作表链接正确，因为我可以在页面的其他组件(非引导程序)上成功使用它。
我能够覆盖任何引导组件的唯一方法是将style作为html属性包含进来，如下面的示例所示，其中我将第一行的背景设为蓝色。我已经致力于解决这个问题几天了，我似乎发现唯一的事情就是确保您的自定义样式表在Bootstrap样式表之后加载。我在bootstrap css之后加载了我的home.css表单，但我不确定Django加载这些表单的方
浏览 43提问于2019-07-23得票数 0
4回答
当添加新表单输入失败时，增量name属性
javascript、jquery
表单中有一个添加按钮，用于添加表单输入。在新表单输入时，我尝试增加属性name，例如name="description-1"、name="description-2"等。然而，所有新输入都具有相同的name="description-1"。我错过了什么？
var dataList = $('.products');
var jsonOptions = [{
"product": "11111",
"description": "description 1"
浏览 5提问于2017-02-22得票数 0
回答已采纳
1回答
动态表单元素引导
jquery、html、css、twitter-bootstrap
我无法使此表单按预期工作。我试图使用代码构建一个包含动态字段的表单，但是每当我按下表单上的"Add“按钮时，它都会在添加新行之前显示一个缩进。为了理解我的问题，你可以看看这个链接：。正如你所看到的，一旦页面加载，"Title“字段就会与" page”字段对齐，但是当你点击"Add“按钮时，整个设计就变得糟糕了。
你可以看看我的代码：
$(function() {
$(document).on('click', '.btn-add', function(e) {
e.preventDefault();
va
浏览 13提问于2016-08-08得票数 0
回答已采纳
2回答
自举模态体压缩为模态页脚
html、twitter-bootstrap、modal-dialog、bootstrap-modal
我正在用创建一些调制解调器。
我使用的是不同的div，如所示。
我正在体验的是，当我的屏幕大小大于x(均值为未知值)时，包含我的modal-body的div被向上推(空)，包含我的modal-footer的div在modal-body上吸收元素。
这张图片是为了解释我的意思：
正规模态
压缩模态
代码是一样的，只要改变屏幕大小。
<HTML>
<head>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&g
浏览 6提问于2016-01-22得票数 9
回答已采纳
1回答
Jquery -从列表中选择正确的类
javascript、jquery
我有以下HTML：
<tr id="item-1">
<td class="shopping-cart-quantity">
<div class="product-quantity">
<input id="product-quantity" data-area="item-1" data-product="1" type="text" value="3">
浏览 2提问于2015-01-02得票数 0
回答已采纳
2回答
引导4关闭模式，背景不会消失
javascript、jquery、twitter-bootstrap、bootstrap-4、bootstrap-modal
我用的是引导4所以我有
css：
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
联署材料：
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
所以我有模式，里面是产品的复选框。
<di
浏览 0提问于2018-05-04得票数 3
1回答
如何将图像设置在相同的底层(仅使用css而不是js)？
css、html、flexbox
谢谢你提前的回复。
我知道te如何创建响应性产品网格，如果我所有的图片都有相同的高度和相同的标题长度，只使用css属性，比如flex display和flex-end align，但是当我对每个图像使用图像(多个高度)和标题(每个图像的长度不同)时，我得到了以下问题：
HTML代码
<div class="imgContainer">
<div class="imgChild row-eq-height">
<div class="img-slider-parent">
浏览 0提问于2016-10-29得票数 3
2回答
AngularJS / JQuery -没有关联标签的表单输入
javascript、jquery、angularjs、intellij-idea、webstorm
我对“没有关联标签的表单输入”有问题。这会出现在文本区域，选择，选择，输入类。
这是我的代码：
<div class="panel-body">
<form name="f" data-ng-submit="addTodo()">
Nazwa:
<textarea class="form-control" name="newTodo" data-ng-model="formData.newTodo" required></textarea>
浏览 4提问于2015-06-14得票数 5
回答已采纳
1回答
如何通过表单外的按钮提交表单？
javascript、reactjs、jsx、react-bootstrap
我想通过表单外部的按钮提交一个表单，并对该表单进行验证。我用的是react的表单标签-引导。
我的代码不验证表单
<Form
noValidate
validated={validated}
onSubmit={e=> this.handleSubmit(e)}>
<Form.Control
required
placeholder="Product Name"
onChange={e => this.setState({name: e.target.value })
浏览 0提问于2019-05-07得票数 2
2回答
在Chrome中使用ng-submit (但在Firefox中工作)，submit by enter不起作用。
html、forms、angularjs、submit
我做了一个看似正确的表单布局，但提交不会发生，我在输入密码后按回车。我需要点击按钮来提交。我的方法是基于的，唯一的例外是我使用按钮，而不是输入。
<form name="loginForm" id="loginForm" ng-submit="login(credentials)" novalidate="novalidate">
<input type="password" placeholder="password" id="password"
浏览 3提问于2014-04-02得票数 0
5回答
如何让输入字段和按钮填充Bootstrap表单中的整行？
html、css、twitter-bootstrap-3
在下面的Bootstrap 3表单中，我尝试使Post按钮位于右侧，并且标签的文本字段填充该行的整个左侧部分： ? 下面是整个表单的标记： <form>
<div class="form-group">
<textarea class="form-control" id="entry" placeholder="Write something in Markdown..." rows="3"></textarea>
</div>
浏览 169提问于2016-07-03得票数 7
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
