1
我正在嘗試構建表單組，但它們未與Bootstrap 3正確對齊。Bootstrap 3表格未正確對齊
我試圖將它們垂直對齊。這是給我的噩夢所以需要一些對你有幫助
請參見下面的屏幕截圖
下面是形式
<div class="container">
<h1>Edit Profile</h1>
<hr>
<div class="row">
<!-- left column -->
<div class="col-md-3">
<div class="text-center">
<img src="//placehold.it/100" class="avatar img-circle" alt="avatar">
<h6>Upload a different photo...</h6>
<input type="file" class="form-control">
</div>
</div>
<!-- edit form column -->
<div class="col-md-9 personal-info">
<!-- <div class="alert alert-info alert-dismissable">
<a class="panel-close close" data-dismiss="alert">×</a>
<i class="fa fa-coffee"></i>
This is an <strong>.alert</strong>. Use this to show important messages to the user.
</div> -->
<h3>Personal info</h3>
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-lg-3 control-label">First name:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="Jane">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Last name:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="Bishop">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Company:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email:</label>
<div class="col-lg-8">
<input class="form-control" type="text" value="[email protected]">
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Time Zone:</label>
<div class="col-lg-8">
<div class="ui-select">
<select id="user_time_zone" class="form-control">
<option value="Hawaii">(GMT-10:00) Hawaii</option>
<option value="Alaska">(GMT-09:00) Alaska</option>
<option value="Pacific Time (US & Canada)">(GMT-08:00) Pacific Time (US & Canada)</option>
<option value="Arizona">(GMT-07:00) Arizona</option>
<option value="Mountain Time (US & Canada)">(GMT-07:00) Mountain Time (US & Canada)</option>
<option value="Central Time (US & Canada)" selected="selected">(GMT-06:00) Central Time (US & Canada)</option>
<option value="Eastern Time (US & Canada)">(GMT-05:00) Eastern Time (US & Canada)</option>
<option value="Indiana (East)">(GMT-05:00) Indiana (East)</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Username:</label>
<div class="col-md-8">
<input class="form-control" type="text" value="janeuser">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password:</label>
<div class="col-md-8">
<input class="form-control" type="password" value="11111122333">
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label"></label>
<div class="col-md-8">
<input type="button" class="btn btn-primary" value="Save Changes">
<span></span>
<input type="reset" class="btn btn-default" value="Cancel">
</div>
</div>
</form>
</div>
</div>
</div>
<hr>
我的CSS片
代碼/* CSS declarations go here */
.stylish-input-group .input-group-addon{
background: white !important;
}
.stylish-input-group .form-control{
border-right:0;
box-shadow:0 0 0;
border-color:#ccc;
}
.stylish-input-group button{
border:0;
background:transparent;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
* {
margin-bottom: 0px;
margin-top:0px;
margin-right: 0px;
margin-left: 0px;
}
.bg{
background: url(fundog.jpg);
background-size: cover;
color: white;
height: 500px;
margin-bottom: 0px;
margin-top:0px;
}
.navbar{
margin-bottom: 0px;
margin-top:0px;
}
.help{
text-align: right;
margin-bottom: 0px;
height: 300px;
}
.spread{margin-bottom: 0px;}
body {
/* set this equal to navbar's height */
}
.usp{
text-align: center;
}
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
.profile{
margin-bottom: 100px;
margin-top:30px;
margin-right: 100px;
margin-left: 100px;
}
我認爲你的窗體組裏的引導類應該加起來等於12嗎？ ，因爲我發現你正在使用col-lg-3和col-lg-8 – Katrin 2015-04-02 10:44:50
嗨，所以我需要使用col-lg-3和col-lg-9？ – 2015-04-02 10:47:41
@Tomchan是啊...你需要使用col-lg-3和col-lg-9，並且將列類放在'div' **而不是**標籤上 – Junaid 2015-04-02 10:50:57