Html 引导中的定心形式？_Html_Css_Twitter Bootstrap_Forms

Html 引导中的定心形式？

html css twitter-bootstrap forms

Html 引导中的定心形式？,html,css,twitter-bootstrap,forms,Html,Css,Twitter Bootstrap,Forms,我在Bootstrap中以表单为中心时遇到问题。表单包括名称和注释框，其中包含一个post按钮这就是我所拥有的： <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>  <l

我在Bootstrap中以表单为中心时遇到问题。表单包括名称和注释框，其中包含一个post按钮

这就是我所拥有的：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
<form id ="Form" onsubmit ="return false">
<div class="mx-auto"style="width: 200px;"> 
  <label for="usr">Name:</label>
  <input type="text"  id="name" >
<br>
<br>
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
  <br>
  <button onClick ="myFunction()">Post</button>
  </form>
  <br>
  <ul id="adduserinput"></ul>
  </div>
</div>
</div>

</body>
</html>

运行代码时，表单仅显示在页面的左侧。它不会使页面居中。有人能帮我吗？

形式{ 保证金：0自动；宽度：200px； } 姓名：评论：邮递形式{ 保证金：0自动；宽度：200px； } 姓名：评论：邮递

mx自动类不适用于Bootstrap 3。如果您使用Bootstrap4，那么它将不会有问题。如果你需要使用bootstrap3，那么把你自己的风格与空白：0自动

姓名：评论：邮递

mx自动类不适用于Bootstrap 3。如果您使用Bootstrap4，那么它将不会有问题。如果你需要使用bootstrap3，那么把你自己的风格与空白：0自动

姓名：评论：邮递

这将帮助您使表单成为页面的中心

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; // optional this is only to get full height
}

这将帮助您使表单成为页面的中心

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh; // optional this is only to get full height
}

正如@MichaelvE所说，mx auto适用于引导程序4，而不是3。我在3中使用的一种方法是将类文本中心添加到表单标记中，或者将它们全部包装在一个。。。。对我来说很好

注意：它并不像名字所暗示的那样，只将文本居中。

就像@MichaelvE所说的，mx auto适用于引导程序4，而不是3。我在3中使用的一种方法是将类文本中心添加到表单标记中，或者将它们全部包装在一个。。。。对我来说很好

注意：它并不像名字所暗示的那样只将文本居中。

如果您想使用引导方式，那么您可以使用col和col offset类。此外，如果您希望它在所有屏幕尺寸上都能响应，请尽量避免使用固定宽度的元素。更重要的是，将表单组类用于包装标签及其相关输入。我向您展示了一个可以使用浏览器宽度的示例：

姓名：评论：邮递

如果您想使用引导方式，那么可以使用col和col offset类。此外，如果您希望它在所有屏幕尺寸上都能响应，请尽量避免使用固定宽度的元素。更重要的是，将表单组类用于包装标签及其相关输入。我向您展示了一个可以使用浏览器宽度的示例：

姓名：评论：邮递