JSFiddle代码,然后我在屏幕上看到的截图,因为JSFiddle显示错误:
(链接中的完整代码,以下简要视图) http://jsfiddle.net/WeDLR/1/
<div class="col-lg-3">
<form method =post action="/UnitInfo/TSMServlet" NAME="form01">
<div class="form-group">
<label for="terminalname" class="col-lg-3 control-label">Terminal Name</label>
<div class="col-lg-3">
<input type="checkbox" class="checkbox" display="inline-block" name="checkbox_tname" onclick="checkbox_tname_click();">
<input type="text" class="form-control" name="tname" placeholder="Terminal Name">
</div>
</div>
</div>
目前,我的复选框部分位于我的文本框下方。我想这样做,所以复选框的中心与文本框的中心位于同一行。我怎样才能做到这一点?
PS。如果我不使用bootstrap文本框,看起来我的对齐就好了。
答案 0 :(得分:1)
尝试关注css ...
.checkbox {
width: 100%;
}
.form-group {
white-space: nowrap;
display:inline
}
.form-control {
display: inline-block;
}
答案 1 :(得分:0)
试试这个,如果可以,我会解释。我没有改变任何CSS。见小提琴。
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
</ul>
</nav>
<br>
<br>
<br>
<br>
<font class="header">
<center>
<b>Unit Information Filter </b>
</center>
</font><br>
<br>
<br>
<div class="container">
<div class="col-lg-3">
<form method="post" action="/UnitInfo/TSMServlet" NAME="form01">
<div class="form-group">
<label for="terminalname" class="col-xs-12 col-sm-12 col-lg-12 control-label">Terminal Name</label>
<div class="col-xs-2 col-sm-1 col-lg-2">
<input type="checkbox" class="checkbox" name="checkbox_tname" onclick="checkbox_tname_click();">
</div>
<div class="col-xs-10 col-sm-11 col-lg-10">
<input type="text" class="form-control" name="tname" placeholder="Terminal Name">
</div>
</div>
<br>
<div class="form-group">
<label for="tbid" class="col-lg-2 control-label">TBID</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="tbid" placeholder="TBID">
</div>
</div>
<br>
<div class="form-group">
<label for="version" class="col-lg-2 control-label">Version</label>
<div class="col-lg-10">
<input type="text" class="form-control" name="version" placeholder="Version">
</div>
</div>
<br>
<div class="form-group">
<label for="lastconnect" class="col-lg-2 control-label">Last Connect Time</label>
</div>
<div class="form-group">
<label for="from" class="col-lg-2 control-label">From </label>
<div class="col-lg-10">
<input type="date" class="form-control" name="timefrom" placeholder="FROMdate">
<label for="to" class="control-label">To</label>
<input type="date" class="form-control" name="timeto" placeholder="TOdate">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default" ONCLICK="checkValue();" value="search" CLASS="BTN_MENU" >
Submit
</button>
</div>
</div>
</div>