Question

我在Bootstrap中将表单居中存在问题。表单包括名称和注释框，其中包括发布按钮。

这就是我所拥有的：

<!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>

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

Answer 1

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">



  <!-- 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>
  <style>
    #Form {
      margin: 0 auto;
      width: 200px;
    }
  </style>
</head>

<body>
  <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>

Answer 2

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

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

Answer 3

mx-auto类不适用于Bootstrap3。如果使用Bootstrap 4，则它将没有问题。如果您需要使用Bootstrap 3，请在页边空白处放置自己的样式：0自动；

   Col A   ColB   Col C   Col D   ColE
1  BBB     2100   2200    2300    2300
2  AAA     1750   1750    1800    1900

3  DDD     140      140     140     140
4  CCC     90       90      90      90

Answer 4

就像@MichaelvE一样，mx-auto适用于Bootstrap 4，而不是3。我在3中使用的一种方法是将text-center类添加到表单标签中（或将它们全部包装在<div class="text-center">...</div>中。对我来说很好。

注意：顾名思义，它不仅使文本居中。

Answer 5

如果要采用Bootstrap方式，则可以使用 col 和 col offset 类。另外，如果希望固定宽度的元素在所有屏幕尺寸上都可以响应，请尝试避免使用固定宽度的元素。甚至，对包装标签使用 form-groups 类，它们与输入相关。我为您展示了一个示例（您可以使用浏览器的宽度播放）：

<!-- 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="col-sm-offset-3 col-sm-6">
      <br>
      <div class="form-group">
        <label for="name">Name:</label>
        <input class="form-control" type="text" id="name"/>
      </div>
      <div>
        <label for="comment">Comment:</label>
        <textarea class="form-control" rows="5" id="comment" style="resize:vertical"></textarea>
      </div>          
      <br>
      <button class="btn btn-primary" onClick="myFunction()">
        Post
      </button>  
    </div>
  </form>  
</div>

您可以注意到，该公式以小，中和大屏幕尺寸为中心，但在超小设备上使用全宽。希望对您有帮助。

在Bootstrap中居中吗？

5 个答案: