jquery - 如何使用 Bootstrap 使按钮出现在中心

标签 jquery html css bootstrap-4

<分区>

我是 bootstrap 和 jquery 的新手,正在为我的学校做一个小元素。我在我的应用程序中使用 Bootstrap ,以便它可以响应。您在 attached image 中看到的问题是两个按钮垂直出现在各自列的顶部。我怎么能安排这两个按钮,使它们出现在各自列的中间。 下面是我的代码

	<div class="container">
		<div class="row">
			<section class="col-sm-5">
				<div class="form-group">
					<label for="project-name">Enter Data:</label>
					<textarea class="form-control" rows="3" id="textarea1"
						name="input1"></textarea>
					<div class="error" id="javaerror"></div>
				</div>
			</section>
			<section class="col-sm-2 text-center">
				<div class="vcenter">
					<button type="button" class="btn btn-default" id="data1">Process1</button>
				</div>
			</section>
			<section class="col-sm-5">
				<div>
					<label for="project-name">Result</label>
					<textarea class="form-control" rows="3" id="result1"
						name="resultdata"></textarea>
				</div>
			</section>
		</div>

		<div class="row">
			<section class="col-sm-5">
				<div class="form-group">
					<label for="project-name">Enter Data:</label>
					<textarea class="form-control" rows="3" id="textarea2"
						name="input2"></textarea>
					<div class="error" id="openerror"></div>
				</div>
			</section>
			<section class="col-sm-2 text-center">
				<div class="vcenter">
					<button type="button" class="btn btn-default" id="data2">Process2
						</button>
				</div>
			</section>
			<section class="col-sm-5">
				<div>
					<label for="project-name">Result</label>
					<textarea class="form-control" rows="3" id="result2"
						name="resultDataNew"></textarea>
				</div>
			</section>
		</div>
	</div>
我的要求是两个按钮 (Process1,Process2) 都应该出现在中间,如图 image 所示。

最佳答案

您可以使用 Bootsraps 的 4 垂直对齐 https://getbootstrap.com/docs/4.0/utilities/flex/#align-items

关于jquery - 如何使用 Bootstrap 使按钮出现在中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50598322/

上一篇:css - 带有固定标题的 div 中的滚动条问题

下一篇:javascript - 幻灯片按钮下划线和淡出动画

相关文章:

html - Zurb Foundation 顶部栏带有简单的文本和链接?

html - 排序无序列表和列表项以在 ul 上显示框阴影

PHP + jQuery - 未定义索引 : , 但它仍然成功发布?

javascript - Jquery 向下滑动 slider

javascript - 按 Enter 时触发 HTML 按钮

javascript - 是否有可能使用 javascript 从 HTML 文档中获取包含 "plain"文本值的所有 HTML 内容元素?

javascript - 如何在jquery或js中创建动态二维数组

javascript - 将淡入添加到样式表切换

jquery - jQuery 高度和 Google 字体问题

jquery - 浏览器会记住 session