使用Bootstrap在水平布局中对齐标签和表单控件组
在Bootstrap中使用.form-horizontal类在水平布局中对齐标签和表单控件组。
您可以尝试运行以下代码来实现.form-horizontal类：
示例
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <form class = "form-horizontal" role = "form"> <div class = "form-group"> <label class = "sr-only" for = "name">Name</label> <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name"> </div> <div class = "form-group"> <label class = "sr-only" for = "name">Name</label> <input type = "number" class = "form-control" id = "name" placeholder = "Enter Age"> </div> <button type = "submit" class = "btn btn-primary">Submit</button> </form> </body> </html>
-
水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度，并将两边的空外边距平均分配： div 元素是居中的 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 注意:
-
问题内容： 我有一个页面，其中仅存在表单，并且我希望将表单放置在屏幕的中央。 该对齐表格水平，但我无法弄清楚如何垂直对齐。我已经尝试使用和，但是它不起作用。 我想念什么？ 问题答案： 更新2019 - Bootstrap 4.3.1 有 没有必要 进行 额外的CSS 。Bootstrap中已经包含的内容将起作用。确保表格的容器为 全高 。Bootstrap4现在具有100％高度的类… 垂直中心：
-
对于非常简短的表单，用户要填写的内容比较少，表单本身也不会占用太多空间，比如网站顶端的快捷登录表单，它只包含用户名、密码和登录按钮： <form action="" method="post"> <label>用户名: </label><input type="text" name="username" /> <label>密码: </label><input type="pas
-
问题内容： 我正在迁移到引导程序4，但是我已经将我的页面的boostrap-min.css从3换成了4，据我所知列的正确性，我的列现在都垂直对齐了。 我还使用了JS小提琴来进行测试，并且能够将它们全部复制为垂直的我指明正确的方向，这应该可行 问题答案： 删除Bootstrap 4 ，因为它需要新的嵌套列。
-
问题内容： 我有一个容器div，其中有一个固定的，并带有。 我想要水平行的float：此容器内的div左。左浮动的Divs在读取其父级的右边界后自然会推到下面的“行”上。即使父级的不允许这样做，也会发生这种情况。这是这样的样子： ！[错误] [1]- 删除了已被广告替换的图片棚屋图片 我希望它看起来如何： ！[右] [2]- 删除了已被广告替换的图片棚屋图片 注意：我想要的效果可以通过使用内联元素
-
text-align-last属性用于定义块级容器中，行内元素的最后一行内容的水平对齐方式，可选值有 auto | left | center | right | justify | start | end | start | end，默认值为 auto。 除 auto外，其它取值与 text-align 属性取值的含义相同。auto 表示使用 text-align 的设定（例外情况，text-a