如何在bootstrap中居中表单3
我怎样才能中心我的login表单？ 我正在使用引导列，但它不工作。
这是我的代码：
<div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-6"> <h2>Log in</h2> <div> <table> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> </tr> </table> </div> </div> </div> </div> 一个简单的方法是添加
.center_div{ margin: 0 auto; width:80% /* value of your choice which suits your alignment */ }
给你class .container .Add width:xx %它，你会得到完美居中的div！
例如：
<div class="container center_div">
但是我觉得默认情况下container是以BS为中心的！
在bootstrap中有一个简单的方法。 无论何时我需要在页面中创build一个div中心，我将所有列分为3（总引导列= 12，除以3 >>> 12/3 = 4）。 除以四给我三栏。 然后我把我的div在中间栏。 而所有这些math运算都是这样完成的：
<div class="col-md-4 col-md-offset-4">my div here</div>
col-md-4制作一列4个自举列。让我们来说说它的主列。 col-md-offset-4在主列的两侧添加一列（4自举列的宽度）。
一行中的总列数必须合计为12.所以你可以做col-md-4 col-md-offset-4。 所以你把你的专栏分成3组，每组4列。 现在你有一个4列的forms与6的偏移量，所以你只得到2列在您的表单的右侧。 你也可以做col-md-8 col-md-offset-2，它会给你一个8列的forms，每列左右两列或者col-md-6 col-md-offset-3（6列forms每边3列空间）等。
像下面的示例一样使用偏移量为6的居中类。
<body class="container"> <div class="col-lg-1 col-offset-6 centered"> <img data-src="holder.js/100x100" alt="" /> </div>
Bootstrap 4使用水平居中
HTML：
<!-- mx-auto: Bootstrap's class my-form: Your class --> <div class="my-form mx-auto"> <h2>Log in</h2> <div> <table> <tr> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> </tr> </table> </div> </div>
CSS：
.my-form{ width: 30%; /* value of your choice */ }
