Cie*_*eja 58 html css twitter-bootstrap twitter-bootstrap-3
如何以登录表单为中心？我正在使用bootstrap列,但它不起作用.
这是我的代码:
<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>
Sid*_*Sid 201
在bootstrap中有这样简单的方法.每当我需要在页面中创建一个div中心时,我将所有列除以3(总自举列= 12,除以3 >>> 12/3 = 4).除以4给我三列.然后我把我的div放在中间栏.所有这些数学都是通过这种方式执行的:
<div class="col-md-4 col-md-offset-4">my div here</div>
col-md-4生成一列4个bootstrap列.让我们说它是主列.col-md-offset-4在主列的两侧添加一列(宽度为4个自举列).
Noo*_*tor 51
一种简单的方法是添加
.center_div{
margin: 0 auto;
width:80% /* value of your choice which suits your alignment */
}
你班.container.新增width:xx %到它,你会得到完全居中的div!
例如:
<div class="container center_div">
但我觉得默认情况下container以BS为中心!
小智 8
一行中的总列数必须加起来为12.所以你可以做col-md-4 col-md-offset-4.因此,您将列拆分为3组,每组4列.现在你有一个4列的形式,偏移量为6,所以你只需要在表格的右侧有两列.你也可以做col-md-8 col-md-offset-2,它会给你一个8列的形式,左边和右边各有2列,col-md-6 col-md-offset-3(6列形式)每侧有3列空间)等
小智 6
我尝试过这个并且有效
<div class="container">
<div class="row justify-content-center">
<div class="form-group col-md-4 col-md-offset-5 align-center ">
<input type="text" name="username" placeholder="Username" >
</div>
</div>
</div>使用带有offset-6的居中类,如下面的示例.
<body class="container">
<div class="col-lg-1 col-offset-6 centered">
<img data-src="holder.js/100x100" alt="" />
</div>
我猜您正在尝试将表单相对于任何容器 div 水平和垂直居中。
您不必为此使用引导程序。只需使用流行的方法（如下）将表格居中即可。
.container{
position relative;
}
.form{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
| 归档时间： |
|
| 查看次数： |
216524 次 |
| 最近记录： |