html - 如何对齐一组中的表单元素
问题描述
我尝试使用 md-offset-8, xs-2 但这不起作用,我需要在中心对齐所有表单字段。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div class="col-md-8 col-md-offset-4 text-center">
<form class="form" action="/action.php", method="POST">
<div class="form-group row">
<div class="col-xs-4">
<label for="field_1">Field 1</label>
<input class="form-control" id="field_1" type="text" name="field 1">
</div>
<div class="col-xs-2">
<label for="field_2">Field 2</label>
<input class="form-control" id="field_2" type="text" name="field 2">
</div>
</div>
<div class="form-group row">
<div class="col-xs-8">
<label for="dataFolder">Field 3</label>
<input class="form-control" id="field_3" type="text" name="field_3" value=text>
</div>
</div>
<div class="col-md-6 text-center">
<button type="submit" class="btn ink-reaction btn-raised btn-primary">Save</button>
</div>
</form>
</div>
解决方案
你的意思是这样的吗?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<div id="page" class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<div class="form-group">
<label for="firstName">Filed 1:</label>
<input id="firstName" class="form-control text-center" type="text">
</div>
<div class="form-group">
<label for="lastName">Filed 2:</label>
<input id="lastName" class="form-control text-center" type="text">
<div class="form-group">
<label for="lastName">Filed 3:</label>
<input id="lastName" class="form-control text-center" type="text">
<button type="submit" class="btn ink-reaction btn-raised btn-primary">Save</button>
</div>
</div>
</div>
推荐阅读
- r - 有没有办法报告导入数据集的文件名?
- vue.js - 如何在 Laravel 8 中安装 Vue.js
- c# - 何时以及为何在 C# 中使用“ValueObject”基类(来自 Microsoft Docs)?
- swift - Simple Pass Thru cikernel 会扭曲颜色值
- linux - 在 Linux 的 x86_64 程序集中创建新文件
- node.js - 有没有办法在 Windows 中使用 npm 安装不同的节点版本?
- c - 用值声明指针的正确方法
- delphi - Delphi调用基于TObject类型的虚拟构造函数
- jsf - WL12.2 processMultipartConfigAnnotation 引发异常
- javascript - 如何获得 React-Select 选项的值?